原创基于vue3+uniapp增强版table表格组件uv3Table

历经半个多月，又一原创跨端新作uniapp-os手机桌面管理系统出阶段性成果了。

uni-os手机oa管理项目使用hbuilderx4.15开发，vite版本v5.2.8。

由于管理系统肯定是少不了表格组件，奈何插件市场uniapp表格组件都太low了。于是自己开发了一款增强版table表格组件uv3Table。

uv3-table一款基于uni-app+vue3升级版跨端表格组件。支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体插槽。支持编译兼容H5+小程序端+App端。

小细节：左右固定列会有一条阴影背景效果。

目前uv3-table表格组件则为分离版，已经发布到我的作品集，欢迎去下载体验。

https://space.yxybox.com/item/detail/1105938011

该组件在pc端依然表现perfect~

uv3Table使用示例

• 基础用法

<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

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 无数据插槽

vue3+uniapp增强版自定义表格组件uv3-table

vue3-uniapp-wechat跨端仿微信聊天实例

希望上述分享能对你有些帮助哈！开发不易，一起fighting~~