基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

<uv3-table :columns="columns" :dataSource="data.list" />

<uv3-table     :columns="columns"     :dataSource="data.list"     stripe     stripeColor="#eee"     padding="5px"     height="450rpx" />

<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}} <input placeholder="搜索" size="small" /></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标识来自定义表格内容) -->     <template #default="{ key, value, row, col, index }">         <template v-if="key == 'image'">             <uv-image :src="value" lazyLoad observeLazyLoad @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>

const props = defineProps({     // 表格数据     dataSource: {         type: Array,         default() {             return []         }     },     /**      * @params {string} background 对应列背景色      * @params {string} type 对应列类型(多选selection 索引index)      * @params {string} label 显示的列标题      * @params {string} prop 对应的列字段名      * @params {string} align 列水平对齐方式(left center right)      * @params {number|string} width 对应列宽度      * @params {boolean|string} fixed 该列固定到左侧(fixed:true|'left')或右侧(fixed:'right')      * @params {string} columnStyle 对应列自定义样式      * @params {string} className/class 表格列的类名className      */     columns: {         type: Array,         default() {             return []         }     },     // 表格宽度     width: { type: [Number, String] },     // 表格高度     height: { type: [Number, String] },     // 表格最大高度     maxHeight: { type: [Number, String] },     // 是否为斑马纹     stripe: { type: [Boolean, String] },     // 斑马纹背景     stripeColor: { type: String, default: '#fafafa' },     // 是否带有边框     border: { type: [Boolean, String] },     // 列宽度(推荐默认rpx)     columnWidth: { type: [Number, String], default: 200 },     // 单元格间距     padding: { type: String, default: '5rpx 10rpx' },     // 是否显示表头     showHeader: { type: [Boolean, String], default: true },     // 表头背景色     headerBackground: { type: String, default: '#ebeef5' },     // 表头颜色     headerColor: { type: String, default: '#333' },     // 表头字体加粗     headerBold: { type: [Boolean, String], default: true },     // 表格背景色     background: { type: String, default: '#fff' },     // 表格颜色     color: { type: String, default: '#606266' },     // 空数据时显示的文本内容，也可以通过 #empty 设置     emptyText: { type: String, default: '暂无数据' } })

<template>     <view         class="uv3__table"         ...     >         <!-- 表头 -->         <view v-if="showHeader" class="uv3__table-thead" :style="{'background': headerBackground}">             <view                 v-for="(col, cindex) in columns"                 :key="cindex"                 class="uv3__thead-th"                 :class="[                     {                         'fixedLeft': col.fixed == true || col.fixed == 'left',                         'fixedRight': col.fixed == 'right',                         'fixedLeftShadow': cindex == fixedLeftIndex,                         'fixedRightShadow': cindex == fixedRightIndex,                     },                     col.className || col.class                 ]"                 ...                 @click="handleHeaderClick(col)"             >                 ...             </view>         </view>         <!-- 表体 -->         <view class="uv3__table-tbody">             ...         </view>     </view> </template>