Tui Plus Vapor

# t-table

Table 表格组件 — 轻量表格，支持自定义表头与行内容插槽、选择列、操作列、边框和斑马纹。

t-table 组件介绍

t-table 是一个 slot 驱动的表格组件，使用 list-view 配合选择组实现多选能力，外层包裹横向 scroll-view 支持水平滚动。适用于移动端多列数据展示、数据管理列表等场景。

基本用法

通过 header 和默认插槽自定义表头与行内容：

vue

<template>
	<view class="p-15">
		<t-card class="mb-15"
				title="Table 表格"
				sub-title="支持边框、斑马纹、多选列、操作列、自定义插槽"></t-card>
		<t-section title="基础表格（边框 + 斑马纹）"
				   class="mb-10"></t-section>
		<t-table class="mb-20"
				 :tables="tableData"
				 :stripe="true"
				 :border="true">
			<template #header>
				<view class="fl faic">
					<text class="w-35">ID</text>
					<text class="f">名称</text>
					<text class="w-80 sta-c">年龄</text>
					<text class="f">城市</text>
				</view>
			</template>
			<template #default="{ item, index }">
				<view class="fl faic">
					<text class="w-35">{{ item.id }}</text>
					<text class="f">{{ item.name }}</text>
					<text class="w-80 sta-c">{{ item.age }}</text>
					<text class="f">{{ item.city }}</text>
				</view>
			</template>
		</t-table>

		<t-section title="多选 + 操作列（编辑/删除）"
				   class="mb-10"></t-section>
		<text class="db s-12 c-#64748b mb-10">已选 ID：{{ selectedIds.join(', ') }}</text>
		<t-table class="mb-20"
				 :tables="tableData"
				 :selection="true"
				 :stripe="true"
				 :border="true"
				 rowKey="id"
				 :actions="actions"
				 :checkIds="selectedIds"
				 actionColumnLabel="操作"
				 content-class="w-500"
				 action-class="w-200"
				 @action="handleAction"
				 @selection-change="handleSelectionChange">
			<template #header>
				<view class="fl faic">
					<text class="w-35">ID</text>
					<text class="f sta-c">名称</text>
					<text class="w-80 sta-c">年龄</text>
					<text class="f sta-c">城市</text>
				</view>
			</template>
			<template #default="{ item, index }">
				<view class="fl faic">
					<text class="w-35">{{ item.id }}</text>
					<text class="f sta-c">{{ item.name }}</text>
					<text class="w-80 sta-c">{{ item.age }}</text>
					<text class="f sta-c">{{ item.city }}</text>
				</view>
			</template>
		</t-table>

		<t-section title="固定宽度（content-class 控制）"
				   class="mb-10"></t-section>
		<t-table :tables="tableData"
				 :stripe="true"
				 :border="true"
				 content-class="table-content-fixed">
			<template #header>
				<view class="fl faic">
					<text class="w-35">ID</text>
					<text class="f">名称</text>
					<text class="w-80 sta-c">年龄</text>
					<text class="f sta-c">城市</text>
				</view>
			</template>
			<template #default="{ item, index }">
				<view class="fl faic">
					<text class="w-35">{{ item.id }}</text>
					<text class="f">{{ item.name }}</text>
					<text class="w-80 sta-c">{{ item.age }}</text>
					<text class="f sta-c">{{ item.city }}</text>
				</view>
			</template>
		</t-table>
	</view>
</template>

<script setup>
	const selectedIds = ref<string[]>([])

	const tableData = ref<UTSJSONObject[]>([
		{ id: 1, name: '张三', age: 25, city: '北京' },
		{ id: 2, name: '李四', age: 30, city: '上海' },
		{ id: 3, name: '王五', age: 28, city: '广州' },
		{ id: 4, name: '赵六', age: 32, city: '深圳' },
		{ id: 5, name: '钱七', age: 24, city: '成都' }
	])

	const actions = ref<UTSJSONObject[]>([
		{ label: '编辑', value: 'edit', type: 'primary' },
		{ label: '删除', value: 'delete', type: 'error' }
	])

	function handleAction(e : UTSJSONObject) {
		const action = e.getString('action')!
		const row = e.getJSON('row')!
		const index = e.getNumber('index')!
		const id = row.getNumber('id')!
		if (action == 'delete') {
			const list = [] as UTSJSONObject[]
			for (let i = 0; i < tableData.value.length; i++) {
				if (i != index) {
					list.push(tableData.value[i])
				}
			}
			tableData.value = list
			selectedIds.value = selectedIds.value.filter((v : string) : boolean => v != `${id}`)
			uni.showToast({ title: '已删除', icon: 'none' })
		} else if (action == 'edit') {
			uni.showModal({
				title: '编辑姓名',
				content: '',
				editable: true,
				placeholderText: '请输入新姓名',
				success: (res : ShowModalSuccess) => {
					if (res.confirm && res.content != '') {
						const list = [] as UTSJSONObject[]
						for (let i = 0; i < tableData.value.length; i++) {
							const item = {} as UTSJSONObject
							const old = tableData.value[i]
							item['id'] = old['id']
							item['name'] = i == index ? res.content : old['name']
							item['age'] = old['age']
							item['city'] = old['city']
							list.push(item)
						}
						tableData.value = list
						uni.showToast({ title: '已修改', icon: 'none' })
					}
				}
			})
		}
	}

	function handleSelectionChange(e : UTSJSONObject) {
		selectedIds.value = e.getArray<string>('ids') ?? []
	}
</script>

选择列

开启 selection 后显示多选列，支持全选：

html

<template>
  <t-table
    :tables="tableData"
    :selection="true"
    row-key="id"
    @selection-change="handleSelectionChange"
  >
    <template #header>
      <view class="w-100 fl">
        <text class="tbl-cell fl-1">名称</text>
        <text class="tbl-cell w-80 ta-c">年龄</text>
      </view>
    </template>
    <template #default="{ item }">
      <text class="tbl-cell fl-1">{{ item.name }}</text>
      <text class="tbl-cell w-80 ta-c">{{ item.age }}</text>
    </template>
  </t-table>
</template>

<script setup>
const handleSelectionChange = (e) => {
  console.log('选中:', e.ids, e.rows)
}
</script>

操作列

通过 actions 配置操作按钮（按钮文本含"删除"时自动显示为 error 类型）：

html

<template>
  <t-table
    :tables="tableData"
    :actions="actions"
    action-column-label="操作"
    action-column-width="160"
    @action="handleAction"
  >
    <template #header>
      <view class="w-100 fl">
        <text class="tbl-cell fl-1">名称</text>
        <text class="tbl-cell w-80 ta-c">年龄</text>
      </view>
    </template>
    <template #default="{ item }">
      <text class="tbl-cell fl-1">{{ item.name }}</text>
      <text class="tbl-cell w-80 ta-c">{{ item.age }}</text>
    </template>
  </t-table>
</template>

<script setup>
const actions = [
  { label: '编辑', value: 'edit' },
  { label: '删除', value: 'delete' }
]
const handleAction = (e) => {
  console.log('操作:', e.action, e.label, e.row, e.index)
}
</script>

引擎模式（columns 配置）

通过 columns + draw() 方法使用自研 Canvas 引擎渲染更复杂的表格：

const columns = new Map<string, UTSJSONObject>()
columns.set('id', {
  label: 'ID',
  width: '50px',
  prop: 'id',
  align: 'center'
})
columns.set('name', {
  label: '名称',
  width: '',
  prop: 'name',
  align: 'left',
  customDrawing: (engine: ITuiEngine, td: ITuiView, val: string) => {
    td.style.backgroundColor = '#0055ff'
    const label = engine.createText()
    label.style.color = '#fff'
    label.value = `${val}`
    td.appendChild(label)
  }
})

t-table API

Props

属性名	说明	类型	默认值
selection	是否显示多选列	Boolean	true
tables	表格数据源	UTSJSONObject[]	[]
columns	列配置对象，Map 结构	Map<string, UTSJSONObject>	new Map()
headerClass	表头容器自定义样式类	String	''
actions	操作列按钮配置	UTSJSONObject[]	[]
actionColumnLabel	操作列表头文案	String	'操作'
actionColumnWidth	操作列宽度（px）	Number	160
contentWidth	内容区域宽度，<= 0 时自适应	Number	-1
border	是否显示外框和行分割线	Boolean	false
stripe	是否显示斑马纹	Boolean	true
stripeColor	斑马纹背景色	String	''
emptyText	空数据提示文案	String	'暂无数据'
rowKey	行唯一标识字段名	String	'id'
checkIds	外部控制的选中行 id 列表	String[]	[]

columns 配置项

当使用引擎模式时，columns Map 的 value 支持以下字段：

属性名	说明	类型
label	列标题	String
width	列宽度	String
prop	数据字段名	String
align	对齐方式（left / center / right）	String
sortable	是否可排序	Boolean
customDrawing	自定义渲染函数	(engine, td, val) => void

Events

事件名	说明	回调参数
action	点击操作列按钮	`{ action, label, row, index }`
selection-change	选中项变化	`{ ids: string[], rows: UTSJSONObject[] }`
select	点击单行选择框	`{ row, index, checked, ids }`
select-all	点击表头全选	`{ checked, ids }`
change	表格内容变化	—
sort	表格排序	—

Slots

插槽名	说明	作用域
header	表头内容	—
default	数据行内容	`{ item, index }`

t-table 组件介绍 ​

基本用法 ​

选择列 ​

操作列 ​

引擎模式（columns 配置） ​

t-table API ​

Props ​

columns 配置项 ​

Events ​

Slots ​