//#region 合并单元格 // 这个方法是 element-ui提供的单元格合并方法 // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex } // row: 当前行 // column: 当前列 // rowIndex:当前行号 // columnIndex :当前列号 // 1代表:独占一行 // 更大的自然数:代表合并了若干行 // 0:代表“消失”的哪那一个单元格,后面的单元格向前推一格 mergeCol(id, rowIndex) { debugger; // 合并单元格 // id:属性名 // rowIndex:行索引值 var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值 if (rowIndex > 0) { // 判断是不是第一行 // eslint-disable-next-line eqeqeq if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) { // 先判断当前单元格的值是不是和上一行的值相等 var i = rowIndex; var num = 0; // 定义一个变量i,用于记录行索引值并进行循环,num用于计数 while (i < this.TableData.length) { // 当索引值小于table的数组长度时,循环执行 if (this.TableData[i][id] === idName) { // 判断循环的单元格的值是不是和当前行的值相等 i++; // 如果相等,则索引值加1 num++; // 合并的num计数加1 } else { i = this.TableData.length; // 如果不相等,将索引值设置为table的数组长度,跳出循环 } } return { rowspan: num, // 最终将合并的行数返回 colspan: 1, }; } else { return { rowspan: 0, // 如果相等,则将rowspan设置为0 colspan: 1, }; } } else { // 如果是第一行,则直接返回 let i = rowIndex; let num = 0; while (i < this.TableData.length) { // 当索引值小于table的数组长度时,循环执行 if (this.TableData[i][id] === idName) { i++; num++; } else { i = this.TableData.length; } } return { rowspan: num, colspan: 1, }; } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格 switch ( columnIndex // 将列索引作为判断值 ) { // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并(索引0,1 指的是页面上的0,1) // gzTroubles,gzID 这两个字段是我要合并的字段名, case 1: return this.mergeCol("gzTroubles", rowIndex); case 0: return this.mergeCol("gzID", rowIndex); } }, //#endregion
其中,switch中 0和1 是根据下面这张图中的顺序来的,
完整代码如下:
上一篇:前端利器——炫酷的CodePen