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

本文提供增强版table表格组件体验,打造跨端表格的新标杆.

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

提供详细示例代码，直接复制运行即可

---

引言

• uv3-table使用示例
• uv3Table编码实现

---

如下图：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: `//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 >{{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"  /></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"  @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><view...><!-- 表头 --><view v-if="showHeader"  :><viewv-for="(col, cindex) in columns":key="cindex":...@click="handleHeaderClick(col)">...</view></view><!-- 表体 --><view >...</view></view>
</template>

Props参数

columns 参数

• background：指定对应列的背景色，可用于为特定列设置独特的视觉效果，以突出显示重要信息或区分不同的数据类型。

• type：定义对应列的类型，支持 "selection"（多选）和 "index"（索引）两种特殊类型。"selection" 类型用于创建多选列，允许用户选择多行数据；"index" 类型用于显示行的索引或序号，方便用户快速定位数据。

• label：设置显示在表头的列标题，清晰地描述该列数据的含义，帮助用户理解表格内容。

• prop：绑定对应的列字段名，将表格数据中的特定属性与该列关联，确保数据正确展示。

• align：控制列内容的水平对齐方式，可选值为 "left"（左对齐）、"center"（居中对齐）和 "right"（右对齐），以满足不同数据的展示需求。

• width：设定对应列的宽度，可以根据数据内容的长度和表格布局的需求进行调整，以实现合理的空间分配。

• fixed：将该列固定到表格的左侧或右侧，支持 "left"、"right" 或布尔值 true（默认固定到左侧）。固定列在表格滚动时保持不动，方便用户查看关键信息。

• columnStyle：为对应列提供自定义样式，允许通过 CSS 样式对象来调整字体、颜色、边框等视觉效果，以实现高度个性化的表格设计。

• className/class：指定表格列的类名，通过添加自定义的 CSS 类，可以进一步细化列的样式，实现复杂的布局和交互效果。

事件

• @headerClick：当用户点击表头时触发，可用于实现排序、筛选等操作。通过监听该事件，可以获取被点击的表头信息，进而根据业务逻辑对表格数据进行处理。

• @rowClick：点击表格行时触发，返回该行的数据。该事件适用于行级别的交互操作，如查看详情、编辑数据或根据行数据执行特定的业务流程。

• @select：在多选或单选场景下触发，返回表格选中的数据。通过该事件，可以获取用户选择的行数据，用于批量操作、数据导出或其他业务处理。

自定义插槽

• headerCell：自定义表头内容的插槽，允许开发者根据需求定制表头的显示效果，如添加图标、按钮或复杂的表头结构，以增强表格的交互性和视觉效果。

• default：默认表体内容的插槽，用于自定义表格单元格的展示方式。可以根据数据类型、业务逻辑或用户需求，灵活地调整单元格的内容和样式。

• empty：无数据插槽，当表格数据为空时展示自定义的提示文字或占位图。通过该插槽，可以为用户提供清晰的反馈，告知其当前表格中没有数据，并可引导用户进行下一步操作。