Table 表格 - 合并与汇总

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

合并行或列

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

日期	姓名	省份	城市	地址

2024-01-01	张三	北京	朝阳区	建国路88号
		北京	海淀区	中关村大街
2024-01-02	李四	上海	浦东新区	陆家嘴
		上海	静安区	南京西路
2024-01-03	王五	广东	天河区	珠江新城

合并行

合并表头

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

基本信息		地址信息
姓名	年龄	省份	城市	详细地址	邮编

张三	28	北京	朝阳区	建国路88号	100020
李四	32	上海	浦东新区	陆家嘴环路	200120
王五	25	广东	天河区	珠江新城	510623
赵六	30	浙江	西湖区	文三路	310012

合并表头

实战：权限管理表格

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

功能模块	详细功能	权限类型	权限列表

账号管理	用户管理	查看	用户列表
		编辑	用户列表新增用户
		操作	新增删除修改
	角色管理	查看	角色列表
		编辑	角色列表新增角色
		操作	新增删除修改
内容管理	文章管理	查看	文章列表
		编辑	文章列表新增文章
		操作	新增删除修改发布
	分类管理	查看	分类列表
		编辑	分类列表新增分类
		操作	新增删除修改

权限管理表格

表尾合计行

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

姓名	金额1	金额2

张三	1000	500
李四	2000	800

合计

¥3000.00

¥1300.00

表尾合计行

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() 函数创建）