el

2024-01-18 20:52| 来源: 网络整理| 查看: 265

在我们处理表格的时候，经常会出现表格的样式进行表格的合并，如下图：

那么在el-table中如何进行合并了，上代码：

//设置单元格 getSpanArr(list) { // 先给所有的数据都加一个v.rowspan = 1 list.forEach(item => { item.rowspan = 1; }); // 双层循环 for (let i = 0; i < list.length; i++) { for (let j = i + 1; j < list.length; j++) { //此处可根据相同字段进行合并，此处是根据的id if (list[i].stageIndex === list[j].stageIndex) { list[i].rowspan++; list[j].rowspan--; } } // 这里跳过已经重复的数据 i = i + list[i].rowspan - 1; } this.tableData = list; this.getSpanArr1(list); },

上面代码中的 if (list[i].stageIndex === list[j].stageIndex) 中的stageIndex就是你想合并的主键，可以是你的数据中的id或者等等都可，然后配置在el-table中加入:span-method="objectSpanMethod"

下面就是对应的objectSpanMethod函数：

//合并单元格 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //第一列 if (columnIndex === 0) { return { rowspan: row.rowspan, colspan: 1 }; } //第二列 if (columnIndex === 1) { return { rowspan: row.rowspan, colspan: 1 }; } if (columnIndex === 2) { return { rowspan: row.rowspan1, colspan: 1 }; } if (columnIndex === 6) { return { rowspan: row.rowspan1, colspan: 1 }; } if (columnIndex === 8) { return { rowspan: row.rowspan, colspan: 1 }; } }

其中的 if (columnIndex === 8) 就是你想要合并的第几列，从0开始，大家注意到

if (columnIndex === 6) { return { rowspan: row.rowspan1, colspan: 1 }; }其中的 rowspan: row.rowspan1,其实就是此处用的另一个主键；如下：

getSpanArr1(list) { // 先给所有的数据都加一个v.rowspan = 1 list.forEach(item => { item.rowspan1 = 1; }); // 双层循环 for (let i = 0; i < list.length; i++) { for (let j = i + 1; j < list.length; j++) { //此处可根据相同字段进行合并，此处是根据的id if(list[i].sum === list[j].sum ||list[i].poweraver === list[j].poweraver) { list[i].rowspan1++; list[j].rowspan1--; } } // 这里跳过已经重复的数据 i = i + list[i].rowspan1 - 1; } this.tableData = list; },

if(list[i].sum === list[j].sum ||list[i].poweraver === list[j].poweraver)用的另外的主键进行合并，这样就可以是多层级的，将结果存在rowspan1；上面是rowspan，此处就是参数不同就可，以上就是关于el-table的多层级的合并，本文到此结束，顿首，有什么问题可以私信我，，，，，

【本文地址】

公司简介

联系我们