Table - Merge & Summary

The Table component supports row/column merging and displaying summary rows.

Merge Rows or Columns

Implement row or column merging via the span-method property.

Date	Name	Province	City	Address

2024-01-01	John	Beijing	Chaoyang	88 Jianguo Rd
		Beijing	Haidian	Zhongguancun St
2024-01-02	Jane	Shanghai	Pudong	Lujiazui
		Shanghai	Jing'an	Nanjing West Rd
2024-01-03	Mike	Guangdong	Tianhe	Zhujiang New Town

Merge Rows

Merge Header

Define multi-level headers via the children property of columns. Set label and children for parent columns, while leaf children are the actual data columns. The table automatically calculates colspan and rowspan to generate grouped headers.

Basic Info		Address Info
Name	Age	Province	City	Detail Address	Zip

John	28	Beijing	Chaoyang	88 Jianguo Rd	100020
Jane	32	Shanghai	Pudong	Lujiazui Ring Rd	200120
Mike	25	Guangdong	Tianhe	Zhujiang New Town	510623
Sarah	30	Zhejiang	Xihu	Wensan Rd	310012

Merge Header

Case Study: Permission Management Table

Combine span-method row merging with the column render function to implement a common Permission Configuration Matrix. The Module and Feature columns automatically merge rows with identical values. Selection for types and specific permissions are implemented via checkboxes rendered with h(), supporting four-level selection linkage across modules, features, types, and permissions.

Module	Feature	Type	Permissions

Account Management	User Management	View	User List
		Edit	User ListAdd User
		Operation	CreateDeleteModify
	Role Management	View	Role List
		Edit	Role ListAdd Role
		Operation	CreateDeleteModify
Content Management	Article Management	View	Article List
		Edit	Article ListAdd Article
		Operation	CreateDeleteModifyPublish
	Category Management	View	Category List
		Edit	Category ListAdd Category
		Operation	CreateDeleteModify

Permission Management Table

Summary Footer Row

Configure the summary row via summary-config and set method for custom summary logic.

Name	Amount 1	Amount 2

John	1000	500
Jane	2000	800

Total

¥3000.00

¥1300.00

Summary Footer Row

API

Multi-level Header (Merge Header)

Implement multi-level headers via the children property of column configurations.

Property	Description	Type	Default
label	Title text of the grouped header	string	—
children	Child column configurations (supports nested multi-layers)	TableColumn[]	—
headerAlign	Header alignment	'left' | 'center' | 'right'	'center' (Grouped columns default to center)
headerClassName	Custom header class name	string	—
headerStyle	Custom header style	CSSProperties	—

Note: Parent columns (those with children) only need a label and do not require a prop. colspan and rowspan are automatically calculated by the component.

span-method

Parameter	Description	Type
row	Current row data	Record<string, unknown>
column	Current column configuration	TableColumn
rowIndex	Current row index	number
columnIndex	Current column index	number

Return Value: { rowspan: number, colspan: number } or [rowspan, colspan]

• rowspan: 0, colspan: 0 indicates the cell is merged (not rendered)
• rowspan: n means spanning n rows, colspan: n means spanning n columns

SummaryConfig

Property	Description	Type	Default
text	Text of the first column in the summary row	string	'Total'
position	Summary row position	'top' | 'bottom'	'bottom'
fixed	Whether to fix the summary row	boolean	false
method	Summary calculation method	({ columns, data }) => Array<string | number | VNode>	—
className	Summary row class name	string | ((params) => string)	—
style	Summary row style	CSSProperties | ((params) => CSSProperties)	—

Column render Function

Parameter	Description	Type
row	Current row data	Record<string, unknown>
column	Current column configuration	TableColumn
rowIndex	Current row index	number
cellValue	Current cell value	unknown

Return Value: VNode (Create via Vue h() function)