Vue + Vxe-Table 动态合并单元格详解：使用案例、原理与优势

🧩 一、什么是"动态合并单元格"？

在传统的 HTML 表格中，我们可以通过 rowspan 和 colspan 来控制单元格的跨行或跨列显示。但在数据量大、结构复杂的前端表格中，手动设置这些属性显然不够灵活。

动态合并单元格 是指根据数据内容和规则，自动计算出哪些单元格应该合并，并通过 rowspan 或 colspan 来渲染到表格中。

---

💡 二、使用场景与价值

✅ 典型使用场景：

场景	描述
数据分组展示	比如订单列表按用户 ID 分组，相同 ID 的多条记录合并为一行
展示嵌套结构	如树形结构数据扁平化后合并父节点
简化 UI 结构	避免重复显示相同的字段值，提升可读性

✅ 使用的好处：

优势	说明
📈 提升可读性	合并相同内容，减少视觉干扰
⚙️ 自动化处理	根据数据自动生成合并规则，无需手动维护
🧱 适应复杂结构	可用于任意层级的嵌套数据
📦 易于复用	合并逻辑封装成函数，可在多个组件中调用

---

🛠️ 三、代码解析与实现原理

1. 表格结构定义（Vue + Vxe-Table）

vue
深色版本
<vxe-table
  border
  height="800"
  :column-config="{ resizable: true }"
  :align="allAlign"
  :merge-cells="mergeCells"
  :data="tableData"
>

关键点：

• merge-cells：接收一个数组，每个元素描述某个单元格是否要合并。
• data：原始数据源。

---

2. 合并逻辑函数 merging()

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'，用于匹配数据项的字段名

🧭 实现流程：

1. 对每一个 id：

   • 找到该 id 第一次出现的行索引 row
   • 统计该 id 出现的总次数 rowspan

2. 遍历所有数据项和字段：

   • 如果字段属于 master 列表，则生成一个合并规则对象 { row, col, rowspan, colspan }

3. 返回合并规则数组 Cells，供 vxe-table 使用

---

🧪 四、实际使用案例

示例数据：

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 }
];

合并配置：

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 中实现？
• 它的底层原理是什么？
• 哪些业务场景下最适用？

如果你正在开发一个数据密集型的后台系统，掌握这项技能将大大提升你的开发效率和用户体验。