如题，公司业务需求，数据结构比较复杂，需要在一张表内实现多级树状数据展示及同属性的单元格合并，并在表格内实现增删改操作。
网上翻阅了很多实例，没有能解决所有需求的案例，于是自己实现了一套。
时间匆忙，逻辑有优化的地方还请无偿指出！
最终效果如下
图上，编码有父子层级，每个编码可包含多个交付阶段，每个交付阶段可包含多个文件，每个文件可添加不同文档项次
实现总结如下
一. 结构调整
首先跟后台确认了数据结构，根据右侧最详细内容为基准，以单层数组返回（以编码树级返回更好）。获取到数据后封装为树级数据。保证最详细处表格每一行都对应一条数据。如图示，忽略为展开子级数据，则图上一共对应七条数据。文章来源：https://www.toymoban.com/news/detail-622872.html
其中，每个数据对象带有三个属性：code_cnt（每条编码下对应的第三部分行数）、stage_cnt（每个编码下的交付阶段对应的第三部分行数）、file_cnt（每个文件对应的第三部分行数）。后面用于表格合并。文章来源地址https://www.toymoban.com/news/detail-622872.html
- 封装完数据或直接获取到父子层级后，因存在多条数据同一编码，每条数据下都有相同children数据存在，所以需删除多余children，保留一条。又因展开时需展示在相同编码下方，所以需保存相同编码最后一条数据的children字段。如图上所示，X-R1.1.4编码有三条数据，应只保留项次编码为-D3.2.2的children数据，以保证点击展开子级时子层级展示在三条数据下方。
// 当同一编码多条数据且有children时，保留最后一级children
deleteChildren(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children && data[i].children.length) {
data[i].hasChild = true; // 后续解释
if ( data.some( (item, index) => index > i && item.code_id === data[i].code_id ) ) {
delete data[i].children;
} else {
data[i].children = this.deleteChildren(data[i].children);
}
}
}
return data;
}
- 因相同编码、相同阶段、相同文件需合并，所以需要递归标识出每个相同编码、阶段、文件的首条数据，以满足后续单元格合并需求。
// 单元格需合并时，标记首条数据
dealDataBefore(data) {
let id = "", stage = "", file = "";
for (let i = 0; i < data.length; i++) {
if (!id || id !== data[i].interface_item_code) {
// 第一条
id = data[i].interface_item_code;
data[i].isFirstLine = true; // 标识编码首条数据
stage = data[i].stage_keyid;
data[i].isFirstStage = true; // 标识阶段首条数据
file = data[i].deliver_file_template_id;
data[i].isFirstFile = true; // 标识文件首条数据
} else {
if (!stage || stage !== data[i].stage_keyid) {
stage = data[i].stage_keyid;
data[i].isFirstStage = true;
file = data[i].deliver_file_template_id;
data[i].isFirstFile = true;
} else {
if (!file || file !== data[i].deliver_file_template_id) {
file = data[i].deliver_file_template_id;
data[i]到了这里，关于基于element-ui的table实现树级表格操作及单元格合并的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
