「uni-app 组件」 t-table 表格-优快云博客

本文介绍了uni-app的t-table组件，用于创建简单的表格。组件支持自定义全局和局部样式，以及内容自定义和多选功能，适用于多个小程序平台。提供了调用方式、属性说明以及更新日志，但不支持合并单元格和调整列宽等功能。建议数据量大的情况下采用分页处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台）

github 地址： https://github.com/mehaotian/t-table
插件市场地址：http://ext.dcloud.net.cn/plugin?id=413

功能亮点

自定义全局表格样式
自定义局部表格样式
表格内容自定义
表格多选

未实现

合并单元格
调整列宽，行高

效果演示

调用方式

<template>
	<view class="warp">
		<view class="box">
			<view class="title">默认效果</view>
			<t-table @change="change">
				<t-tr>
					<t-th>序号</t-th>
					<t-th>姓名</t-th>
					<t-th>年龄</t-th>
					<t-th>爱好</t-th>
				</t-tr>
				<t-tr v-for="item in tableList" :key="item.id">
					<t-td>{{ item.id + 1 }}</t-td>
					<t-td>{{ item.name }}</t-td>
					<t-td>{{ item.age }}</t-td>
					<t-td>{{ item.hobby }}</t-td>
				</t-tr>
			</t-table>
		</view>
		<view class="box">
			<view class="title">自定义样式</view>
			<t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
				<t-tr font-size="14" color="#95b99e" align="left">
					<t-th align="left">姓名</t-th>
					<t-th align="left">年龄</t-th>
					<t-th align="left">爱好</t-th>
					<t-th align="center">操作</t-th>
				</t-tr>
				<t-tr font-size="12" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
					<t-td align="left">{{ item.name }}</t-td>
					<t-td align="left">{{ item.age }}</t-td>
					<t-td align="left">{{ item.hobby }}</t-td>
					<t-td align="left"><button @click="edit(item)">编辑</button></t-td>
				</t-tr>
			</t-table>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				tableList: [{
						id: 0,
						name: '张三',
						age: '19',
						hobby: '游泳'
					},
					{
						id: 1,
						name: '李四',
						age: '21',
						hobby: '绘画'
					},
					{
						id: 2,
						name: '王二',
						age: '29',
						hobby: '滑板'
					},
					{
						id: 3,
						name: '码字',
						age: '20',
						hobby: '蹦极'
					}
				]
			};
		},
		methods: {
			change(e) {
				console.log(e.detail);
			},
			edit(item) {
				uni.showToast({
					title: item.name,
					icon: 'none'
				});
			}
		}
	};
</script>

复制代码

t-table

表格父组件，仅包含 tr 组件

属性说明

属性名	类型	默认值	说明
border	String	1	边框粗细
border-color	Color	#d0dee5	边框颜色
is-check	Boolean	false	是否开启列多选
@change	function		开启多选生效，返回值 event = [0,1,2]

t-tr

表格行组件仅包含 th,td 组件

属性说明

属性名	类型	默认值	说明
font-size	String	15	行字体大小
color	Color	#3b4246	行字体颜色
align	String	center	行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐;