Table 表格

用于展示多条结构类似的数据，支持排序、选择、展开、固定表头、固定列、分页、文字省略等功能。

综合演示

集成固定列、固定表头、排序、选择、自定义渲染、文字省略、工具栏、分页等功能。

姓名	部门	职位	状态	薪资▲▼	入职日期	电话
张张伟 emp1@company.com	技术部	前端工程师	离职	8000	2022-01-01	130000000
李李娜 emp2@company.com	产品部	后端工程师	在职	13000	2022-02-02	150000137
王王芳 emp3@company.com	设计部	产品经理	在职	18000	2022-03-03	170000274
刘刘洋 emp4@company.com	运营部	UI设计师	在职	23000	2022-04-04	180000411
陈陈磊 emp5@company.com	市场部	运营专员	在职	28000	2022-05-05	190000548
杨杨帆 emp6@company.com	技术部	数据分析师	在职	11000	2022-06-06	130000685
赵赵倩 emp7@company.com	产品部	前端工程师	在职	16000	2022-07-07	150000822
黄黄涛 emp8@company.com	设计部	后端工程师	离职	21000	2022-08-08	170000959

共 46 条

已选中 0 项

基础用法

通过 columns 和 data 定义列与数据。

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

斑马纹

stripe 显示斑马纹。

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

可排序

设置列的 sortable 属性启用排序。

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

行选择

rowSelection 配置 checkbox 多选或 radio 单选。

多选 — 已选中 0 项

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

单选 — 已选中无

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

可展开行

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

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

固定表头

通过 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号

固定列

设置列的 fixed 为 'left' 或 'right'，配合 scroll.x 实现横向滚动。

姓名	年龄	部门	邮箱	手机	城市	入职日期
员工1	25	技术部	user1@example.com	1380000000	北京	2023-01-01
员工2	26	产品部	user2@example.com	1380000001	上海	2023-02-02
员工3	27	设计部	user3@example.com	1380000002	广州	2023-03-03
员工4	28	运营部	user4@example.com	1380000003	深圳	2023-04-04
员工5	29	技术部	user5@example.com	1380000004	杭州	2023-05-05
员工6	30	产品部	user6@example.com	1380000005	北京	2023-06-06
员工7	31	设计部	user7@example.com	1380000006	上海	2023-07-07
员工8	32	运营部	user8@example.com	1380000007	广州	2023-08-08

加载状态

loading 控制加载状态。

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

文字省略

设置列的 ellipsis 属性，需配合 width。

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

方法调用

通过 ref 调用表格方法。

姓名	年龄	地址
张三	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?: number \| string; y?: number \| string }`	`-`	滚动配置，x 横向滚动宽，y 固定表头高度
`showTotal`	`boolean`	`true`	显示总数
`showPageSize`	`boolean`	`false`	显示每页条数切换
`emptyText`	`string`	`'暂无数据'`	空数据提示文字
`rowClassName`	`string \| ((record, index) => string)`	`-`	行自定义类名
`rowStyle`	`object \| ((record, index) => object)`	`-`	行自定义样式

Column 配置

参数	类型	默认值	说明
`title`	`string`	`-`	列标题
`dataIndex`	`string`	`-`	数据字段名
`width`	`number \| string`	`-`	列宽度
`minWidth`	`number \| string`	`-`	最小宽度
`align`	`'left' \| 'center' \| 'right'`	`'left'`	对齐方式
`fixed`	`'left' \| 'right'`	`-`	固定列
`sortable`	`boolean \| { sortDirections }`	`-`	排序
`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)`	点击行
`cell-click`	`(record, column, event)`	点击单元格

Slots

插槽名	参数	说明
`toolbar`	`-`	表格顶部工具栏区域
`empty`	`-`	空数据自定义内容
`expand-row`	`{ record }`	展开行内容
`[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`	清除所有选中