Table 表格 - 合并与汇总

Table 组件支持合并行列和显示汇总行。

合并行或列

通过 span-method 属性实现合并行或列。

合并行

合并表头

通过 columns 的 children 属性定义多级表头。父列设置 label 和 children，子列是实际的数据列。表格会自动计算 colspan 和 rowspan，生成分组表头。

合并表头

实战：权限管理表格

结合 span-method 行合并与列 render 渲染函数，实现常见的权限配置矩阵。功能模块和详细功能列自动合并相同值的行，权限类型和权限列表通过 h() 渲染勾选框，支持模块/功能/类型/权限四级联动勾选。

权限管理表格

表尾合计行

通过 summary-config 配置汇总行，设置 method 自定义汇总逻辑。

表尾合计行

API

多级表头（合并表头）

通过列配置的 children 属性实现多级表头。

属性	说明	类型	默认值
label	分组表头的标题文本	string	—
children	子列配置（支持多层嵌套）	TableColumn[]	—
headerAlign	表头对齐方式	'left' | 'center' | 'right'	'center'（分组列默认居中）
headerClassName	表头自定义类名	string	—
headerStyle	表头自定义样式	CSSProperties	—

注意：父列（有 children 的列）只需要设置 label，不需要设置 prop。colspan 和 rowspan 由组件自动计算。

span-method 合并方法

参数	说明	类型
row	当前行数据	Record<string, unknown>
column	当前列配置	TableColumn
rowIndex	当前行索引	number
columnIndex	当前列索引	number

返回值：{ rowspan: number, colspan: number } 或 [rowspan, colspan]

• rowspan: 0, colspan: 0 表示该单元格被合并（不渲染）
• rowspan: n 表示跨 n 行，colspan: n 表示跨 n 列

SummaryConfig 汇总配置

属性	说明	类型	默认值
text	汇总行第一列的文本	string	'合计'
position	汇总行位置	'top' | 'bottom'	'bottom'
fixed	是否固定汇总行	boolean	false
method	汇总计算方法	({ columns, data }) => Array<string | number | VNode>	—
className	汇总行类名	string | ((params) => string)	—
style	汇总行样式	CSSProperties | ((params) => CSSProperties)	—

Column render 渲染函数

参数	说明	类型
row	当前行数据	Record<string, unknown>
column	当前列配置	TableColumn
rowIndex	当前行索引	number
cellValue	当前单元格的值	unknown

返回值：VNode（使用 Vue h() 函数创建）