vue+element表格获取到后端数据之后合并单元格

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//表格 <el-table :span-method="objectSpanMethod"> //methods: objectSpanMethod({row, column, rowIndex, columnIndex}){       if (columnIndex === 0) {         return {           rowspan: row.rowspan,           colspan: 1         };       }     },   setrowspans() {       // 先给所有的数据都加一个v.rowspan = 1       this.menuTableList.forEach(v => {         v.rowspan = 1;       });       // 双层循环       for (let i = 0; i < this.menuTableList.length; i++) {         // 内层循环，上面已经给所有的行都加了v.rowspan = 1         // 这里进行判断         // 如果当前行的id和下一行的id相等         // 就把当前v.rowspan + 1         // 下一行的v.rowspan - 1         for (let j = i + 1; j < this.menuTableList.length; j++) {           //此处可根据相同字段进行合并，此处是根据的foodTime           if (this.menuTableList[i].foodTime === this.menuTableList[j].foodTime) {             this.menuTableList[i].rowspan++;             this.menuTableList[j].rowspan--;           }         }         // 这里跳过已经重复的数据         i = i + this.menuTableList[i].rowspan - 1;       }     },

　　在获取后端数据的函数里调用  this.setrowspans()

效果：

 

<el-table :data="futureDutyList" :span-method="objectSpanMethod"

借鉴博客：https://blog.csdn.net/weixin_49210760/article/details/116203550