Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

通过 columns 和 data 定义列和数据：

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

带边框和斑马纹

bordered 显示边框，stripe 显示斑马纹，可组合使用。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

表格尺寸

size 支持 xs / sm / md / lg 四种尺寸。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

可排序

设置列的 sortable 属性启用排序，支持升序/降序切换。

姓名	年龄▲▼	薪资▲▼	地址
张三	28	15000	北京市朝阳区
李四	32	22000	上海市浦东新区
王五	25	12000	广州市天河区
赵六	36	30000	深圳市南山区
钱七	29	18000	杭州市西湖区

多选

rowSelection 配置 checkbox 多选，onChange 回调获取选中行。

已选中：0 项

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

单选

rowSelection 配置 radio 单选。

已选中：无

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

可展开行

通过 #expand-row 插槽自定义展开内容。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

自定义列渲染

通过 slotName 指定列插槽名，实现标签、按钮等自定义渲染。

姓名	年龄	状态	地址
张三	28	离线	北京市朝阳区建国路88号
李四	32	离线	上海市浦东新区世纪大道1号
王五	25	离线	广州市天河区体育西路103号
赵六	36	离线	深圳市南山区科技园路8号

文字省略

设置列的 ellipsis 属性启用文字省略，需配合 width 使用。

姓名	描述
张三	这是一段很长很长的描述文字，用于测试文字省略功能的展示效果，当内容超出容器宽度时会显示省略号
李四	另一段超长的描述内容，依然是为了验证省略功能是否正常工作，超出部分应该自动隐藏并显示省略号

固定表头

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

姓名	年龄	地址
用户1	20	城市1号街道1号
用户2	21	城市2号街道2号
用户3	22	城市3号街道3号
用户4	23	城市4号街道4号
用户5	24	城市5号街道5号
用户6	25	城市6号街道6号
用户7	26	城市7号街道7号
用户8	27	城市8号街道8号
用户9	28	城市9号街道9号
用户10	29	城市10号街道10号
用户11	30	城市11号街道11号
用户12	31	城市12号街道12号
用户13	32	城市13号街道13号
用户14	33	城市14号街道14号
用户15	34	城市15号街道15号
用户16	35	城市16号街道16号
用户17	36	城市17号街道17号
用户18	37	城市18号街道18号
用户19	38	城市19号街道19号
用户20	39	城市20号街道20号

分页

pagination 配置分页参数，showTotal 显示总数，showPageSize 切换每页条数。

姓名	年龄	地址
用户1	20	城市1号街道1号
用户2	21	城市2号街道2号
用户3	22	城市3号街道3号
用户4	23	城市4号街道4号
用户5	24	城市5号街道5号
用户6	25	城市6号街道6号
用户7	26	城市7号街道7号
用户8	27	城市8号街道8号
用户9	28	城市9号街道9号
用户10	29	城市10号街道10号
用户11	30	城市11号街道11号
用户12	31	城市12号街道12号
用户13	32	城市13号街道13号
用户14	33	城市14号街道14号
用户15	34	城市15号街道15号
用户16	20	城市16号街道16号
用户17	21	城市17号街道17号
用户18	22	城市18号街道18号
用户19	23	城市19号街道19号
用户20	24	城市20号街道20号
用户21	25	城市21号街道21号
用户22	26	城市22号街道22号
用户23	27	城市23号街道23号
用户24	28	城市24号街道24号
用户25	29	城市25号街道25号
用户26	30	城市26号街道26号
用户27	31	城市27号街道27号
用户28	32	城市28号街道28号
用户29	33	城市29号街道29号
用户30	34	城市30号街道30号
用户31	20	城市31号街道31号
用户32	21	城市32号街道32号
用户33	22	城市33号街道33号
用户34	23	城市34号街道34号
用户35	24	城市35号街道35号
用户36	25	城市36号街道36号
用户37	26	城市37号街道37号
用户38	27	城市38号街道38号
用户39	28	城市39号街道39号
用户40	29	城市40号街道40号
用户41	30	城市41号街道41号
用户42	31	城市42号街道42号
用户43	32	城市43号街道43号
用户44	33	城市44号街道44号
用户45	34	城市45号街道45号
用户46	20	城市46号街道46号
用户47	21	城市47号街道47号
用户48	22	城市48号街道48号
用户49	23	城市49号街道49号
用户50	24	城市50号街道50号

共 50 条...

加载状态

loading 控制加载状态，loadingText 自定义提示文字。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

工具栏

通过 #toolbar 插槽在表格顶部添加搜索、新增等操作。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

行样式与自定义空状态

rowClassName / rowStyle 自定义行样式；#empty 插槽自定义空状态。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

姓名	年龄	地址
🎉 暂无数据

表头分组

通过 column.children 配置多级表头。

姓名	联系方式	地址
姓名	张三	地址		北京市朝阳区建国路88号
李四			上海市浦东新区世纪大道1号
王五			广州市天河区体育西路103号
赵六			深圳市南山区科技园路8号

方法调用

通过 ref 调用 getSelectedRows / clearSelection / expandAll 等方法。

姓名	年龄	地址
张三	28	北京市朝阳区建国路88号
李四	32	上海市浦东新区世纪大道1号
王五	25	广州市天河区体育西路103号
赵六	36	深圳市南山区科技园路8号

Table Props

参数	类型	默认值	说明
`columns`	`TableColumnData[]`	`[]`	列配置数据
`data`	`Record<string, any>[]`	`[]`	数据源
`bordered`	`boolean`	`false`	是否显示边框
`stripe`	`boolean`	`false`	是否显示斑马纹
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	表格尺寸
`rowKey`	`string \| ((record) => string \| number)`	`'key'`	行唯一标识
`loading`	`boolean`	`false`	加载状态
`loadingText`	`string`	`'加载中...'`	加载提示文字
`rowSelection`	`TableSelection`	`-`	行选择配置
`pagination`	`object \| false`	`false`	分页配置，false 不显示
`scroll`	`{ x?; y? }`	`-`	滚动配置
`showTotal`	`boolean`	`true`	显示总数
`showPageSize`	`boolean`	`false`	显示每页条数切换
`pageSizeOptions`	`number[]`	`[10,20,50,100]`	每页条数选项
`emptyText`	`string`	`'暂无数据'`	空数据提示文字
`rowClassName`	`string \| ((record, index) => string)`	`-`	行自定义类名
`rowStyle`	`object \| ((record, index) => object)`	`-`	行自定义样式
`tableLayoutFixed`	`boolean`	`false`	固定表格布局
`expandedRowRender`	`(record) => VNodeChild`	`-`	展开行渲染函数

Column 配置

参数	类型	默认值	说明
`title`	`string`	`-`	列标题
`dataIndex`	`string`	`-`	数据字段名
`width`	`number \| string`	`-`	列宽度
`minWidth`	`number \| string`	`-`	最小宽度
`align`	`'left' \| 'center' \| 'right'`	`'left'`	对齐方式
`fixed`	`'left' \| 'right'`	`-`	固定列
`sortable`	`boolean \| { sortDirections }`	`-`	排序
`filterable`	`boolean`	`false`	启用筛选
`filters`	`{ label; value }[]`	`-`	筛选选项
`ellipsis`	`boolean`	`false`	省略号
`slotName`	`string`	`-`	内容插槽名
`titleSlotName`	`string`	`-`	标题插槽名
`children`	`TableColumnData[]`	`-`	表头分组子列

rowSelection

参数	类型	默认值	说明
`type`	`'checkbox' \| 'radio'`	`'checkbox'`	选择类型
`selectedRowKeys`	`(string \| number)[]`	`[]`	已选中 key 列表
`onChange`	`(keys, rows) => void`	`-`	选中变化回调

Events

事件名	参数	说明
`select`	`(keys, rows)`	选中变化
`select-all`	`(keys, rows)`	全选变化
`selection-change`	`(keys, rows)`	选中变化
`sorter-change`	`(dataIndex, direction)`	排序变化
`page-change`	`(page)`	页码变化
`page-size-change`	`(pageSize)`	每页条数变化
`expand`	`(rowKey, expanded)`	展开/收起
`row-click`	`(record, event)`	点击行
`row-dblclick`	`(record, event)`	双击行
`cell-click`	`(record, column, event)`	点击单元格

Slots

插槽名	参数	说明
`toolbar`	`-`	表格顶部工具栏区域
`empty`	`-`	空数据自定义内容
`expand-row`	`{ record }`	展开行内容
`tfoot`	`-`	表尾内容
`pagination-left`	`-`	分页左侧区域
`pagination-right`	`-`	分页右侧区域
`[slotName]`	`{ record, column, rowIndex }`	列自定义内容
`[titleSlotName]`	`{ column }`	列标题自定义内容

Methods

方法名	参数	说明
`selectAll`	`(checked: boolean)`	全选/取消全选
`select`	`(rowKey, checked)`	选中/取消指定行
`expandAll`	`(expanded: boolean)`	全部展开/收起
`expand`	`(rowKey, expanded)`	展开/收起指定行
`getSelectedRowKeys`	`() => (string\|number)[]`	获取所有选中行的 key
`getSelectedRows`	`() => any[]`	获取所有选中行的数据
`clearSelection`	`() => void`	清除所有选中