更新记录

1.1.0(2024-07-18)

  • 新增隔行换色样式
  • 支持固定表头/表列、单选/多选事件
  • 支持自定义表头/表体内容

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

vue3版本!!!

uniapp table多功能综合表格【增强版】

组件名:uv3Table 代码块: <uv3-table>

uv3-table表格组件是基于uniapp+vue3自定义加强版表格组件,支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽。支持编译兼容H5+小程序端+App端。

目前uv3-table表格组件已经发布到我的原创作品集 - uv3-table

引入方式

本组件符合easycom规范,只需将uv3-table组件放在components目录,在页面template中即可直接使用。

基本用法

示例

  • 基础用法
<uv3-table :columns="columns" :dataSource="data.list" />
  • 自定义斑马纹样式
<uv3-table
    :columns="columns"
    :dataSource="data.list"
    stripe
    stripeColor="#eee"
    padding="5px 0"
    height="450rpx"
/>
  • 自定义表头样式、列背景
<script setup>
    import { ref } from 'vue'
    import Mock from 'mockjs'

    const columns = ref([
        // 索引序号
        {type: 'index', align: 'center', width: 100, fixed: true},
        // 自定义列背景
        {prop: 'keyword', label: '话题词', align: 'left', width: '350', background: '#e5fbff'},
        {prop: 'hits', label: '点击率', align: 'center', width: 120},
    ])
    const data = ref(Mock.mock({
        total: 100,
        page: 1,
        pagesize: 10,
        'list|10': [
            {
                id: '@id()',
                keyword: '@ctitle(10, 20)',
                hits: '@integer(1000,10000)'
            }
        ]
    }))
</script>
<uv3-table 
    :columns="columns"
    :data="data.list"
    :headerBold="true"
    headerBackground="#eee"
    padding="5px 0"
    height="500rpx"
/>
  • 综合表格(自定义插槽、固定表头/列)
<script setup>
    import { ref } from 'vue'
    import Mock from 'mockjs'

    const columns = ref([
        {type: 'selection', align: 'center', width: 80, fixed: true}, // 多选
        {type: 'index', label: 'ID', align: 'center', width: 80, fixed: true}, // 索引序号
        {prop: 'author', label: '作者', align: 'center', width: 120},
        {prop: 'title', label: '标题', align: 'left', width: 350},
        {prop: 'image', label: '图片', align: 'center', width: 120},
        {prop: 'switch', label: '推荐', align: 'center', width: 100},
        {prop: 'tags', label: '标签', align: 'center', width: 100},
        {prop: 'rate', label: '评分', align: 'center', width: 200},
        {prop: 'date', label: '发布时间', align: 'left', width: 250}, // 时间
        {prop: 'action', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作
    ])
    const data = ref(Mock.mock({
        total: 100,
        page: 1,
        pagesize: 10,
        'list|20': [
            {
                id: '@id()',
                author: '@cname()',
                title: '@ctitle(10, 20)',
                image: `https://api.yimian.xyz/img?id=@integer(100, 300)`,
                switch: '@boolean()',
                'tags|1': ['admin', 'test', 'dev'],
                rate: '@integer(1, 5)',
                date: '@datetime()',
                color: '@color()',
            }
        ]
    }))
</script>
<uv3-table
    :dataSource="data.list"
    :columns="columns"
    :headerBold="true"
    headerBackground="#ecf5ff"
    stripe
    border
    padding="5px"
    maxHeight="650rpx"
    @rowClick="handleRowClick"
    @select="handleSelect"
>
    <!-- 自定义header插槽内容 -->
    <template #headerCell="{ key, col, index }">
        <template v-if="key == 'title'">
            <view class="flex-c">{{col.label}} <uv3-input placeholder="搜索" size="small" style="font-weight: normal; margin-left: 5px; width: 100px;" /></view>
        </template>
        <template v-else-if="key == 'date'">
            <uni-icons type="calendar"></uni-icons> {{col.label}}
        </template>
        <template v-else>{{col.label}}</template>
    </template>

    <!-- 自定义body插槽内容(由于小程序不支持动态:name插槽,通过key标识l来自定义表格内容) -->
    <template #default="{ key, value, row, col, index }">
        <template v-if="key == 'image'">
            <uv-image :src="value" lazyLoad observeLazyLoad width="80rpx" height="80rpx" @click="previewImage(value)" />
        </template>
        <template v-else-if="key == 'switch'">
            <switch :checked="value" style="transform:scale(0.6);" />
        </template>
        <template v-else-if="key == 'tags'">
            <uv-tags :text="value" :color="row.color" :borderColor="row.color" plain size="mini" />
        </template>
        <template v-else-if="key == 'rate'">
            <uni-rate :value="value" size="14" readonly />
        </template>
        <template v-else-if="key == 'action'">
            <uni-icons type="compose" color="#00aa7f" @click="handleEdit(row)" />
            <uni-icons type="trash" color="#ff007f" style="margin-left: 5px;" @click="handleDel(row)" />
        </template>
        <template v-else>{{value}}</template>
    </template>
</uv3-table>

API

uv3Table Props

属性名 类型 默认值 说明
dataSource Array - 数据源
columns Array - 列参数配置
width String auto 表格宽度
height String auto 表格高度
maxHeight [Number/String] auto 表格最大高度
stripe Boolean false 是否斑马纹
stripeColor String #fafafa 斑马纹背景
border Boolean false 是否带有边框
padding String 5px 单元格间距
columnWidth [Number/String] 200 列宽度
showHeader Boolean true 是否显示表头
headerBackground String #ebeef5 表头背景色
headerColor String #333 表头颜色
headerBold Boolean true 表头文字是否加粗
background String #fff 表格背景色
color String #606266 表格文字颜色
emptyText String 暂无数据 空数据时显示的文本内容

columns参数

  • 列参数
  • background 对应列背景色
  • type 对应列类型(多选selection 索引index)
  • label 显示的列标题
  • prop 对应的列字段名
  • align 列水平对齐方式(left center right)
  • width 对应列宽度
  • fixed 该列固定到左侧(fixed:true|'left') 或 右侧(fixed:'right')
  • columnStyle 对应列自定义样式
  • className/class 表格列的类名className

事件

  • @headerClick 点击表头
  • @rowClick 点击行触发
  • @select 多选/单选

自定义插槽

  • headerCell 自定义表头内容
  • default 默认表体内容
  • empty 无数据插槽

💝最后

基于uniapp+vue3手机os桌面系统同步到原创作品集,有需要可以去看下! https://gf.bilibili.com/item/detail/1105982011

开发不易,希望各位小伙伴们多多支持下哈~~ ☕️☕️

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问