element可编辑的合并单元格表格

Question

需求：
vue+element项目下的一个功能

其中，枚举值、成员行、显示名称为可编辑文本框。用户点击表格下面添加枚举弹出录入容器，允许用户添加枚举值、成员行号和显示名称，添加后数据插入到对应的枚举中。枚举定义表格中，成员行999表示默认显示名称，同一枚举值不可定义重复成员行
用户添加或编辑枚举定义表格后，同步在规则详情中自动显示用户定义的枚举值。

问题：
这个表格我个人感觉难在可编辑新增并且可以自动合并单元格上，我现在的思路是获取后台数据 前台根据数据合并单元格 新增的时候查询所有表格数据 如果没有相同枚举就新增一条 如果有就加到相同枚举的最后然后合并 编辑枚举的时候将所有相同查询所有相同枚举并同时赋值 而且无论做什么操作最后都要排序 因为合并单元格需要根据排序来

但我想的是不是太麻烦了，有没有更简单的思路，甚至不局限于表格

Answer 1

觉得合并行麻烦可以用这种：

1. 将后台返回的数据转换为：

枚举值: {children: [{成员行, 显示名称}]}

2.使用表格的自定义行列功能，把 成员行、显示名称 这种需要合并的单元格用 p标签 之类的循环出来，用 border 1px solid 之类的css来模拟合并效果