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