最新版本v1.0.60
Table 表格 - 多级表头
当数据结构比较复杂时，可以使用多级表头来展现数据的层次关系。
基础多级表头
只需在列配置中添加 children 属性，即可轻松实现多级表头。底层会自动根据数据嵌套深度计算 rowspan 和 colspan。
基础多级表头
三级及以上表头
children 可以无限级嵌套，从而支持极为复杂的表头结构。表格内部采用高性能递归重构算法，确保即使在深层嵌套下也能保持丝滑的渲染性能。
多级嵌套表头
多级表头与行列合并
多级表头可以与 span-method 完美配合。通常用于展示具有归属关系的分类数据，通过表头分组和单元格合并，使报表更具可读性。
多级表头合并行
可折叠多级表头
利用 Vue 的响应式特性和 computed 属性，可以实现动态展开/收起的多级表头。这对于需要展示大量详细指标、但又希望保持界面简洁的报表非常有用。
动态展开/收起表头
API 补充
在 TableColumn 接口中，支持以下属性配置：
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 列唯一标识 | string | — |
| prop | 列字段名 | string | — |
| label | 列标题 | string | — |
| width | 列宽 | number | string | — |
| minWidth | 最小列宽 | number | string | — |
| maxWidth | 最大列宽 | number | string | — |
| align | 内容对齐方式 | 'left' | 'center' | 'right' | 'left' |
| headerAlign | 表头对齐方式 | 'left' | 'center' | 'right' | — |
| fixed | 固定列 | 'left' | 'right' | true | — |
| sortable | 是否可排序 | boolean | 'custom' | false |
| resizable | 是否可调整列宽 | boolean | true |
| showOverflowTooltip | 是否显示溢出提示 | boolean | object | false |
| className | 列类名 | string | — |
| headerClassName | 表头类名 | string | — |
| style | 列样式 | CSSProperties | — |
| headerStyle | 表头样式 | CSSProperties | — |
| visible | 是否可见 | boolean | true |
| children | 子列配置（实现多级表头） | TableColumn[] | — |
| type | 列类型 | 'selection' | 'index' | 'expand' | 'radio' | — |
| render | 自定义单元格渲染 | (params) => VNode | — |
| headerRender | 自定义表头渲染 | (params) => VNode | — |
| indexMethod | 序号列自定义方法 | (index: number) => number | string | — |
| selectable | 勾选框是否可选判断函数 | (row, index) => boolean | — |
| sortBy | 指定排序字段 | string | ((row) => unknown) | — |
| sortMethod | 自定义排序方法 | (a, b, order) => number | — |
| ellipsis | 省略号配置 | boolean | EllipsisConfig | false |
| formatter | 单元格格式化方法 | (row, column, cellValue, index) => string | VNode | — |
注意事项：
- 设置了
children的列，其prop属性通常会被忽略，因为该列仅作为分组容器。fixed属性建议设置在最外层（如示例中的“日期”列）或是最底层的具体数据列，中间的分组列不要重复设置固定属性。