Tui Plus Vapor

Appearance

t-table ​

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

组件介绍 ​

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

基本用法 ​

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

html
<template>
  <t-table
    :tables="tableData"
    :stripe="true"
    :border="true"
  >
    <template #header>
      <view class="fl">
        <text class="tbl-cell w-70 ta-c">ID</text>
        <text class="tbl-cell fl-1">名称</text>
        <text class="tbl-cell w-80 ta-c">年龄</text>
        <text class="tbl-cell fl-1">城市</text>
      </view>
    </template>
    <template #default="{ item, index }">
      <view class="fl">
        <text class="tbl-cell w-70 ta-c">{{ item.id }}</text>
        <text class="tbl-cell fl-1">{{ item.name }}</text>
        <text class="tbl-cell w-80 ta-c">{{ item.age }}</text>
        <text class="tbl-cell fl-1">{{ item.city }}</text>
      </view>
    </template>
  </t-table>
</template>

<script setup>
const tableData = ref([
  { id: 1, name: '张三', age: 25, city: '北京' },
  { id: 2, name: '李四', age: 30, city: '上海' },
  { id: 3, name: '王五', age: 28, city: '广州' }
])
</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 引擎渲染更复杂的表格：

ts
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)
  }
})

API ​

Props ​

属性名说明类型默认值
selection是否显示多选列Booleantrue
tables表格数据源UTSJSONObject[][]
columns列配置对象，Map 结构Map<string, UTSJSONObject>new Map()
headerClass表头容器自定义样式类String''
actions操作列按钮配置UTSJSONObject[][]
actionColumnLabel操作列表头文案String'操作'
actionColumnWidth操作列宽度（px）Number160
contentWidth内容区域宽度，<= 0 时自适应Number-1
border是否显示外框和行分割线Booleanfalse
stripe是否显示斑马纹Booleantrue
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 }