更新记录

1.1.0（2024-07-18）

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

平台兼容性

uni-app

uni-app x

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

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

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