Table 表格

Table 表格组件，用于创建一个表格，支持配置表格类型、表格数据、表格类名、表头类名、是否有边框、是否有斑马纹、斑马纹颜色、空数据文本、行键名、选中的行ID等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

vue

<template>
	<t-page title="表格" class="p.30">
		<t-card class="mb.30" title="Table 表格"
			sub-title="亮点:采用插槽式布局数据结构完全自由 灵活度高,自由度更高容易扩展采用-listview布局自动回收资源行列宽高能自适应"></t-card>
		<template v-if="area==1">
			<t-section title="空状态" class="mb.30"></t-section>
			<t-table :tables="tableData1" ref="tableEl" rowKey="id" type="s" class="tdr-tdb-mb.30">
				<t-table-column mode="selection" align="center" width="75rpx"></t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称"></t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
			</t-table>
		</template>
		<template v-if="area==2">
			<t-section title="更多主题展示" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" type="e" class="tdr-tdb-mb.30">
				<t-table-column mode="selection" align="center" width="75rpx"></t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称"></t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex }">
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<template v-if="area==3">
			<t-section title="主题" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" :checkIds="checkIds" type="w" @change="selectChange"
				class="tdr-tdb-mb.30" @sort="tablesort" table-class="w.1000">
				<t-table-column mode="selection" align="center" width="75rpx"></t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称">
					<template v-slot:default="{ row }">
						<t-text class="txt">{{(row as UTSJSONObject)['name']}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex,columnIndex }">
						<t-text class="txt">列号：{{columnIndex}}</t-text>
						<t-text class="txt">行号：{{rowIndex}}</t-text>
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<template v-if="area==4">
			<t-section title="横向滚动+自定义插槽用法" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" :checkIds="checkIds" @change="selectChange"
				class="tdr-tdb-mb.30" @sort="tablesort" table-class="w.1000">
				<t-table-column mode="selection" align="center" width="75rpx"></t-table-column>
				<t-table-column align="center" prop="id" label="应用ID" :sortable="true"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称">
					<template v-slot:default="{ row }">
						<t-text class="txt">{{(row as UTSJSONObject)['name']}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex,columnIndex }">
						<t-text class="txt">列号：{{columnIndex}}</t-text>
						<t-text class="txt">行号：{{rowIndex}}</t-text>
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<template v-if="area==5">
			<t-section title="增加一列显示序号" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" :checkIds="checkIds" type="w" @change="selectChange"
				class="tdr-tdb-mb.30" @sort="tablesort" table-class="w.1000">
				<t-table-column mode="selection" align="center" width="75rpx"></t-table-column>
				<t-table-column align="center" width="100rpx" label="序号">
					<template v-slot:default="{ rowIndex }">
						<t-text class="txt">{{rowIndex}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称">
					<template v-slot:default="{ row }">
						<t-text class="txt">{{(row as UTSJSONObject)['name']}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex,columnIndex }">
						<t-text class="txt">列号：{{columnIndex}}</t-text>
						<t-text class="txt">行号：{{rowIndex}}</t-text>
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<template v-if="area==6">
			<t-section title="不显示选择项" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" :checkIds="checkIds" type="w" class="tdr-tdb-mb.30"
				@sort="tablesort" table-class="w.1000">
				<t-table-column align="center" width="100rpx" label="序号">
					<template v-slot:default="{ rowIndex }">
						<t-text class="txt">{{rowIndex}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称">
					<template v-slot:default="{ row }">
						<t-text class="txt">{{(row as UTSJSONObject)['name']}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex,columnIndex }">
						<t-text class="txt">列号：{{columnIndex}}</t-text>
						<t-text class="txt">行号：{{rowIndex}}</t-text>
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<template v-if="area==7">
			<t-section title="不显示选择项" class="mb.30"></t-section>
			<t-table :tables="tableData" ref="tableEl" rowKey="id" :checkIds="checkIds" type="w" class="tdr-tdb-mb.30"
				:border="true" @sort="tablesort" table-class="w.1000">
				<t-table-column align="center" width="100rpx" label="序号">
					<template v-slot:default="{ rowIndex }">
						<t-text class="txt">{{rowIndex}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="id" label="应用ID"></t-table-column>
				<t-table-column align="center" prop="name" label="应用名称">
					<template v-slot:default="{ row }">
						<t-text class="txt">{{(row as UTSJSONObject)['name']}}</t-text>
					</template>
				</t-table-column>
				<t-table-column align="center" prop="create_time" label="创建时间"></t-table-column>
				<t-table-column align="center" label="操作">
					<template v-slot:default="{ rowIndex,columnIndex }">
						<t-text class="txt">列号：{{columnIndex}}</t-text>
						<t-text class="txt">行号：{{rowIndex}}</t-text>
						<t-button @click="test(rowIndex as number)" type='e' size="mini">删除</t-button>
					</template>
				</t-table-column>
			</t-table>
		</template>
		<t-row class='ffww-tdb-tdr-tdp'>
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=1">空状态</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=2">切换皮肤</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=3">横向滚动</t-button>
			<t-button type="w" class="mr.30-mb.30" size="small" @click="area=4">列排序</t-button>
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=5">序号</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=6">取消选择</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=4">自定义插槽用法</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=7">显示边框</t-button>
		</t-row>
	</t-page>
</template>

<script>
	import { TuiApi } from '@/api/uriApi.uts'
	import { TuiTableSortEvent } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				area: 1,
				title: "空状态",
				tableData1: [] as UTSJSONObject[],
				tableData: [] as UTSJSONObject[],
				cloneTableData: [] as UTSJSONObject[],
				checkIds: ['24', '34'] as string[]
			}
		},
		methods: {
			tablesort(e : TuiTableSortEvent) {
				if (e.state == 0) {
					this.tableData = []
					this.tableData = this.cloneTableData
				} else {
					const arr = this.tableData.sort((a : UTSJSONObject, b : UTSJSONObject) : number => {
						const _a = parseInt(`${a[e.field]}`)
						const _b = parseInt(`${b[e.field]}`)
						const d = e.state == 1 ? _a - _b : _b - _a
						return d
					});
					// #ifdef APP
					this.tableData = []
					this.tableData = arr
					// #endif
				}
			},
			selectChange(ids : string[]) {
				console.log(ids)
			},
			test(index : number) {
				this.tableData.splice(index, 1)
			},
			onDelete(rowIndex : number) {
				this.tableData.splice(rowIndex, 1)
				this.tableData = [...this.tableData]
			},
			getTableList(cur : number) {
				TuiApi('getTableList', {
					current: cur,
					pageSize: 10
				}).then(res => {
					const data = res['data'] as UTSJSONObject
					this.tableData = data['list'] as UTSJSONObject[]
					this.cloneTableData = [...this.tableData]
				})
			}
		},
		created() {
			this.getTableList(1)
		},
		onReady() {

		}
	}
</script>

t-table Props

名称	描述	类型	默认值	可选值
type	表格类型	String	'p'	-
tables	表格数据	UTSJSONObject[]	[]	-
tableClass	表格类名	String	''	-
headerClass	表头类名	String	''	-
border	是否有边框	Boolean	false	true, false
stripe	是否有斑马纹	Boolean	true	true, false
stripeColor	斑马纹颜色	String	''	-
emptyText	空数据文本	String	'暂无数据'	-
rowKey	行键名	String	'id'	-
checkIds	选中的行ID	string[]	[]	-

t-table Events

事件名	描述	回调参数
change	当选择的行发生变化时触发	(keys: string[])
sort	当排序操作发生时触发	(event: TuiTableSortEvent)

t-table Slots

名称	描述
default	默认插槽

t-table Methods

方法名	描述	参数
sortTable	触发排序操作	(field: string, index: number)
selectAll	全选或取消全选操作	-
selectRow	选择或取消选择行	(key: string, index: number)

t-table-column Props

名称	描述	类型	默认值	可选值
mode	列模式	String	''	-
label	列标签	String	''	-
width	列宽	String	''	-
prop	列属性名	String	''	-
align	对齐方式	String	'left'	'left', 'center', 'right'
sortable	是否可排序	Boolean	false	true, false

Table 表格 ​

支持平台 ​

示例 ​

t-table Props ​

t-table Events ​

t-table Slots ​

t-table Methods ​

t-table-column Props ​

Table 表格

支持平台

示例

t-table Props

t-table Events

t-table Slots

t-table Methods

t-table-column Props