el-table 合并单元格(合并行)

1.  添加 :span-method="objectSpanMethod"

el-table 合并单元格(合并行)_第1张图片

 2.  写objectSpanMethod 方法

//#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 是根据下面这张图中的顺序来的,

el-table 合并单元格(合并行)_第2张图片

 完整代码如下:





你可能感兴趣的:(vue,html,前端)