🧩 一、什么是"动态合并单元格"?
在传统的 HTML 表格中,我们可以通过 rowspan
和 colspan
来控制单元格的跨行或跨列显示。但在数据量大、结构复杂的前端表格中,手动设置这些属性显然不够灵活。
动态合并单元格 是指根据数据内容和规则,自动计算出哪些单元格应该合并,并通过
rowspan
或colspan
来渲染到表格中。
💡 二、使用场景与价值
✅ 典型使用场景:
场景 | 描述 |
---|---|
数据分组展示 | 比如订单列表按用户 ID 分组,相同 ID 的多条记录合并为一行 |
展示嵌套结构 | 如树形结构数据扁平化后合并父节点 |
简化 UI 结构 | 避免重复显示相同的字段值,提升可读性 |
✅ 使用的好处:
优势 | 说明 |
---|---|
📈 提升可读性 | 合并相同内容,减少视觉干扰 |
⚙️ 自动化处理 | 根据数据自动生成合并规则,无需手动维护 |
🧱 适应复杂结构 | 可用于任意层级的嵌套数据 |
📦 易于复用 | 合并逻辑封装成函数,可在多个组件中调用 |
🛠️ 三、代码解析与实现原理
1. 表格结构定义(Vue + Vxe-Table)
ini
vue
深色版本
<vxe-table
border
height="800"
:column-config="{ resizable: true }"
:align="allAlign"
:merge-cells="mergeCells"
:data="tableData"
>
关键点:
merge-cells
:接收一个数组,每个元素描述某个单元格是否要合并。data
:原始数据源。
2. 合并逻辑函数 merging()
ini
js
深色版本
export const merging = (tableData, master, ids, matching = 'id') => {
let Cells = [];
ids.forEach((id) => {
const row = tableData.findIndex(item => item[matching] === id);
const rowspan = tableData.filter(item => item[matching] === id).length;
tableData.forEach((item) => {
Object.keys(item).forEach((name, colIndx) => {
master.includes(name) && Cells.push({
row: row,
col: colIndx,
rowspan: rowspan,
colspan: 1
});
});
});
});
return Cells;
};
🔍 函数参数说明:
参数 | 类型 | 描述 |
---|---|---|
tableData |
Array | 表格数据数组 |
master |
Array | 需要合并的字段名列表 |
ids |
Array | 要合并的主键值(如 id ) |
matching |
String | 默认 'id' ,用于匹配数据项的字段名 |
🧭 实现流程:
-
对每一个
id
:- 找到该
id
第一次出现的行索引row
- 统计该
id
出现的总次数rowspan
- 找到该
-
遍历所有数据项和字段:
- 如果字段属于
master
列表,则生成一个合并规则对象{ row, col, rowspan, colspan }
- 如果字段属于
-
返回合并规则数组
Cells
,供vxe-table
使用
🧪 四、实际使用案例
示例数据:
yaml
js
深色版本
const tableData = [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28 },
{ id: 10001, name: 'Test2', role: 'Test', sex: 'Women', age: 22 },
{ id: 10002, name: 'Test3', role: 'PM', sex: 'Man', age: 32 },
{ id: 10002, name: 'Test4', role: 'Designer', sex: 'Women', age: 23 },
{ id: 10002, name: 'Test5', role: 'Develop', sex: 'Women', age: 30 },
{ id: 10003, name: 'Test6', role: 'Designer', sex: 'Women', age: 21 }
];
合并配置:
ini
js
深色版本
let master = ['id', 'age']
let ids = [10001, 10002, 10003]
mergeCells.value = merging(tableData, master, ids)
效果:
id | name | role | sex | age |
---|---|---|---|---|
10001 | Test1 | Develop | Man | 28 |
Test2 | Test | Women | ||
10002 | Test3 | PM | Man | 32 |
Test4 | Designer | Women | ||
Test5 | Develop | Women | ||
10003 | Test6 | Designer | Women | 21 |
可以看到:
id
和age
字段只在每组的第一行显示- 相同
id
的其他行对应字段被合并隐藏
🎯 五、总结
✅ 动态合并单元格的核心价值:
价值 | 说明 |
---|---|
自动化 | 根据数据自动计算合并规则,无需手动写 rowspan |
灵活性 | 支持任意字段组合合并,适应多种业务需求 |
可扩展性 | 可以封装为通用函数,在多个组件中复用 |
用户体验优化 | 减少重复信息,提升表格可读性和美观度 |
🧩 适合使用的项目类型:
- 后台管理系统(CRM、ERP)
- 数据分析平台
- 报表系统
- 电商后台订单管理
- 客户资料汇总展示
📌 六、进阶建议
如果你希望进一步增强这个功能,可以考虑以下扩展:
功能 | 描述 |
---|---|
🧮 动态检测字段变化 | 当 tableData 更新时自动重新计算合并规则 |
🔄 支持 colspan 合并 |
不仅支持行合并,也支持列合并 |
📋 多级字段合并 | 支持父子字段嵌套合并(如 address.province ) |
📊 图形化配置面板 | 在 UI 中让用户选择要合并的字段和规则 |
📖 七、结语
动态合并单元格是构建专业级表格不可或缺的功能之一。通过本文的讲解,你可以清晰地理解:
- 为什么要使用动态合并?
- 如何在 Vue + Vxe-Table 中实现?
- 它的底层原理是什么?
- 哪些业务场景下最适用?
如果你正在开发一个数据密集型的后台系统,掌握这项技能将大大提升你的开发效率和用户体验。