Table 表格 - 多级表头

当数据结构比较复杂时，可以使用多级表头来展现数据的层次关系。

基础多级表头

只需在列配置中添加 children 属性，即可轻松实现多级表头。底层会自动根据数据嵌套深度计算 rowspan 和 colspan。

基础多级表头

children 可以无限级嵌套，从而支持极为复杂的表头结构。表格内部采用高性能递归重构算法，确保即使在深层嵌套下也能保持丝滑的渲染性能。

多级嵌套表头

多级表头可以与 span-method 完美配合。通常用于展示具有归属关系的分类数据，通过表头分组和单元格合并，使报表更具可读性。

多级表头合并行

利用 Vue 的响应式特性和 computed 属性，可以实现动态展开/收起的多级表头。这对于需要展示大量详细指标、但又希望保持界面简洁的报表非常有用。

动态展开/收起表头

在 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 属性建议设置在最外层（如示例中的“日期”列）或是最底层的具体数据列，中间的分组列不要重复设置固定属性。

日期	配送信息
	姓名	地址
	姓名	省份	市区	详细地址	邮编

项目名称	研发指标
	进度监控		质量保证
	开发进度 (%)	测试进度 (%)	缺陷数	质量等级