Element UI Table单元格视觉合并方案
本文探讨如何优雅地解决Element UI Table组件中单元格合并问题，尤其是在后端数据结构与前端展示需求不一致的情况下。 假设后端返回的数据包含商品信息及其对应的多个适用机构，而前端需要将同一商品的多个机构信息合并到同一行显示。
现有方案中，数据已完成扁平化处理并绑定到el-table组件。然而，直接使用el-table的span-method方法效率低下且增加代码复杂度，特别是考虑到数据已扁平化的情况。 此外，el-switch组件的v-model绑定到父级row数据也存在问题。
推荐方案：CSS样式模拟合并
我们建议放弃使用span-method，转而利用CSS样式模拟合并效果。 这种方法保持数据结构不变，通过控制单元格边框样式来创造视觉上的合并效果，更简洁高效且易于维护。
具体实现方法：在需要合并的单元格下方添加与表格边框一致的线，从而模拟合并效果。 以下示例代码展示了如何实现：
.el-table .cell {
display: flex;
align-items: center;
border-bottom: 1px solid #dcdfe6; /* 添加下边框 */
}
/* 根据实际情况修改选择器，例如合并第一列的指定行： */
.el-table tr:nth-child(even) td:first-child { /* 合并第一列的偶数行 */
border-bottom: 0; /* 移除下边框 */
}
通过灵活运用CSS选择器，可以精准控制单元格边框，达到视觉上合并单元格的目的，同时避免了span-method的复杂性和v-model绑定问题。 这种方法更易于理解和维护，也更符合Element UI组件的设计理念。
