Table 表格

表格组件用于数据展示，支持列排序、筛选、行选择、分页、展开行等丰富功能，输出原生 <table> DOM，完全兼容 Tabler CSS。

基础用法

通过 data 和 columns 属性声明式渲染表格。

<TTable :data="data" :columns="columns" />

斑马纹与悬停

设置 striped 启用斑马纹，hover 启用行悬停高亮。

<TTable :data="data" :columns="columns" striped hover />

展开行

通过 expandable 配置展开行内容。

<TTable :data="data" :columns="columns" :expandable="{ expandedRowRender: (record) => record.email }" />

带边框

设置 bordered 启用完整表格边框。

<TTable :data="data" :columns="columns" bordered />

固定表头

通过 scroll.y 设置固定高度，表头在纵向滚动时固定。

<TTable :data="data" :columns="columns" :scroll="{ y: 200 }" />

列排序

为列配置 sortable 和 sorter 函数启用排序，支持 v-model:sort-by / v-model:sort-order 受控。

<TTable
    :data="data"
    :columns="columns"
    v-model:sort-by="sortBy"
    v-model:sort-order="sortOrder"
/>

列筛选

为列配置 filters 和 onFilter 启用列头筛选下拉。

const columns = [
  { key: 'name', title: 'Name' },
  { key: 'age', title: 'Age' },
  { key: 'status', title: 'Status', filters: [
    { text: 'Active', value: 'Active' },
    { text: 'Inactive', value: 'Inactive' },
  ], onFilter: (val: string, record: any) => record.status === val },
]

<TTable :data="data" :columns="columns" />

行选择

通过 row-selection 配置启用手动行选择，支持多选（checkbox）和单选（radio）。

多选

<TTable :data="data" :columns="columns" :row-selection="{ type: 'checkbox' }" />

单选

<TTable :data="data" :columns="columns" :row-selection="{ type: 'radio' }" />

自定义单元格

通过 bodyCell 插槽自定义单元格内容，可渲染操作按钮、头像等复杂内容。

<TTable :data="data" :columns="columns">
  <template #bodyCell="{ text, record, column }">
    <template v-if="column.key === 'name'">
      <strong>{{ text }}</strong>
    </template>
    <a v-else-if="column.key === 'email'" :href="`mailto:${text}`" class="text-reset">{{ text }}</a>
    <span v-else-if="column.key === 'role'" class="badge bg-azure-lt">{{ text }}</span>
    <template v-else>{{ text }}</template>
  </template>
</TTable>

内置分页

设置 pagination 启用内置分页，自动对数据进行切片。

<TTable :data="pageData" :columns="columns" pagination striped hover />

设置 size="small" 启用紧凑模式，borderless 去除边框。

<TTable :data="data" :columns="columns" size="small" borderless />

响应式表格

设置 responsive 在窄屏时启用横向滚动容器。

<TTable :data="data" :columns="columns" responsive />

行事件

监听行点击、双击等事件。

<TTable :data="data" :columns="columns" @row-click="(record) => handleClick(record)" />

树形数据

通过 treeProps 开启树形模式，数据含 children 字段时自动渲染树形结构。

<TTable :data="treeData" :columns="[{ key: 'name', title: '部门/姓名' }]" :tree-props="{ children: 'children', indentSize: 24 }" />

固定列

列配置 fixed: 'left' | 'right' 固定列，配合 responsive 横向滚动时左侧/右侧列固定。

<TTable :data="data" :columns="[{ key: 'name', title: 'Name', fixed: 'left' }, ...]}" responsive />

行禁用

通过 rowSelection.getCheckboxProps 返回 { disabled: true } 禁用指定行的选择。

<TTable :data="data" :columns="columns" :row-selection="{ type: 'checkbox', getCheckboxProps: (r) => ({ disabled: r._disabled }) }" />

选择项下拉

rowSelection.selections 启用了选择项下拉菜单（全选/反选/清空），点击选择列旁的 ··· 按钮。

<TTable :data="data" :columns="columns" :row-selection="{ type: 'checkbox', selections: true }" />

默认展开行

通过 expandable.defaultExpandedRowKeys 指定默认展开的行。

<TTable :data="data" :columns="columns" :expandable="{ expandedRowRender: (r) => r.desc, defaultExpandedRowKeys: [1] }" />

列宽拖拽

列配置 resizable: true 启用列宽拖拽调整，鼠标悬停在列边框上显示拖拽手柄。

<TTable :data="data" :columns="[{ key: 'name', title: 'Name', width: 150, resizable: true }, ...]" />

API

Props

Prop	说明	类型	默认值
data	表格数据	any[]	[]
columns	列配置	TableColumn[]	[]
row-key	行唯一标识字段名或函数	string | ((record) => any)	'id'
row-selection	行选择配置	TableRowSelection	—
v-model:sort-by	当前排序列 key	string | null	null
v-model:sort-order	排序方向	'asc' | 'desc' | null	null
v-model:filters	筛选状态	Record<string, any[]>	{}
pagination	分页配置	boolean | TablePaginationConfig	false
scroll	滚动配置	TableScroll	—
expandable	展开行配置	TableExpandable	—
size	表格尺寸	'large' | 'middle' | 'small'	—
bordered	显示完整边框	boolean	false
striped	斑马纹	boolean	false
hover	行悬停高亮	boolean	false
borderless	无边框	boolean	false
responsive	响应式滚动	boolean | 'sm'|'md'|'lg'|'xl'	false
mobile-responsive	移动端布局断点	false | 'sm'|'md'|'lg'|'xl'	false
empty-text	空数据提示	string	'暂无数据'
row-class-name	行自定义 class 函数	(record, index) => string	—
tree-props	树形数据配置	TreeProps	—

TableColumn 列配置

属性	说明	类型	默认值
key	字段名（必填）	string	—
title	表头文案	string	—
width	列宽	string | number	—
fixed	固定列	'left' | 'right'	—
align	对齐方式	'left' | 'center' | 'right'	—
nowrap	不换行	boolean	false
ellipsis	溢出省略号	boolean	false
sortable	启用排序	boolean	false
sorter	排序比较函数	(a, b) => number	—
default-sort-order	默认排序方向	'asc' | 'desc'	—
filters	筛选项	TableFilterItem[]	—
on-filter	筛选过滤函数	(value, record) => boolean	—
filter-multiple	多选筛选	boolean	true
render	自定义渲染函数	(text, record, index) => VNode	—
resizable	启用列宽拖拽	boolean	false

Slots

插槽	作用域	说明
bodyCell	{ text, record, index, column }	自定义单元格渲染
headerCell	{ column }	自定义表头渲染
empty	—	空数据状态
summary	—	合计行
expandRow	{ record, index }	展开行内容
toolbarLeft	—	分页模式左侧工具栏
toolbarRight	—	分页模式右侧工具栏
bodyPrepend	—	表体前插入行
bodyAppend	—	表体后插入行

Emits

事件	参数	说明
change	(pagination, filters, sorter)	分页/排序/筛选变化
rowClick	(record, index, event)	行点击
rowDblclick	(record, index, event)	行双击
cellMouseEnter	(text, record, index, column, event)	单元格悬停