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

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

news/2024/11/18 19:52:29/文章来源:https://www.cnblogs.com/xiaoyan2017/p/18199130

vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件

uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。

如下图：H5+小程序+App端，多端运行一致。

uv3-table表格插件是最新原创项目uniapp-os后台管理系统的一个独立版组件。

由于在开发uni-os手机后台系统需要用到table表格组件。无奈uniapp官方及插件市场table表格组件无论功能及UI上都不满足要求，于是自己爆肝一个多日夜开发了一款全新uniapp+vue3综合表格组件。

目前该项目已经出阶段性成果接近尾声了，相信很快就能和大家见面，到时也会做一些技术分享，敬请期待！

uv3-table使用示例

将uv3-table组件放到uniapp项目components目录下，无需在页面再次引入，即可使用。

基础用法

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

自定义条纹样式

<uv3-table:columns="columns":dataSource="data.list"stripestripeColor="#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"stripeborderpadding="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>

rowClick点击表格行，会返回该行数据。

select单选/多选，会返回表格选中数据。

uv3Table编码实现

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><viewclass="uv3__table"...><!-- 表头 --><view v-if="showHeader" class="uv3__table-thead" :style="{'background': headerBackground}"><viewv-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>