数据展示/表格

Table 表格

Table 用于展示结构化数据,支持固定表头、纵向滚动、横向滚动、多选列、表头上下排列和单元格自定义组件渲染。

纵向滚动

表头固定在顶部,表体内容纵向滚动;表头高度 40px,表体行高 60px。

横向滚动与固定列

支持同时横向和纵向滚动,可配置固定表头、固定列和右侧操作列。

多选、排序与自定义内容

表头第一列可配置多选,表头支持点击切换排序;单元格内容可插入组件,默认展示 Label。

API 参考

参数 说明 类型 可选值 默认值
columns表格列配置,包含 key、title、subtitle、width、fixed、render、headerRender 和 footerRender;title 支持字符串或数组,数组会以上下排列展示array-[]
data表格数据源array-[]
footerData表尾数据,配置后展示底部表尾行object-null
selectable是否展示表头第一列多选booleantrue | falsefalse
selectedRowKeys默认选中的行 keyarray-[]
rowKey行唯一标识字段string-id
defaultSort默认排序状态,包含 key 和 orderobjectasc | descnull
onSortChange排序切换回调,返回当前排序 key 和 orderfunction-null
onSelectionChange勾选变化回调,返回 selectedRowKeys 和 selectedRowsfunction-null
column.render自定义单元格内容,可返回文本或组件节点;示例中状态列默认插入 Labelfunction--
column.headerRender自定义表头内容,可返回文本或组件节点function--
height表格可视高度,超出后滚动number-420
rowHeight表体行高number-60
headerHeight表头高度number-40
minWidth表格最小宽度,容器不足时横向滚动number-760
stickyHeader是否固定表头booleantrue | falsetrue
stickyFooter是否固定表尾booleantrue | falsefalse
fixedLeftColumns从左侧开始固定的列数number-0
fixedRightColumns从右侧开始固定的列数number-0
emptyText空数据展示文本string-暂无数据
className自定义类名string-''
id自定义 idstring-''