vue合并单元格行列一起合并

一：vue合并单元格行列一起合并看图，合并如下图

1.数据如下：

2.在el-table中设置属性:span-method="objectSpanMethod"，如图下

3.代码如下，每一列要设置不同的key，为了防止合并之后每组上下的内容一样出错，换行等问题；columnIndex为第一列的索引，rowIndex，为行的索引,自己放到项目里面打印一下就可知道

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      var rowspan = 1;
      var colspan = 1;
      if (columnIndex === 0) {
        if (this.myObj[row.zdname].start === rowIndex) {
          rowspan = this.myObj[row.zdname].step;
          colspan = 1;
        } else {
          rowspan = 0;
          colspan = 0;
        }
      }
      if (columnIndex === 1) {
        if (this.myObj_two[row.typeName + row.zdname].start === rowIndex) {
          rowspan = this.myObj_two[row.typeName + row.zdname].step;
          colspan = 1;
        } else {
          rowspan = 0;
          colspan = 0;
        }
        if (row.typeName === row.typeStatus && row.typeName === row.typeAlias) {
          colspan = 3;
        }
      }
      if (columnIndex === 2) {
        if (
          this.myObj_tro[row.typeName + row.zdname + row.typeAlias].start ===
          rowIndex
        ) {
          rowspan = this.myObj_tro[row.typeName + row.zdname + row.typeAlias]
            .step;
          colspan = 1;
        } else {
          rowspan = 0;
          colspan = 0;
        }

        if (row.typeName === row.typeStatus && row.typeName === row.typeAlias) {
          colspan = 0;
        } else if (row.typeAlias === row.typeStatus) {
          colspan = 2;
        }
        // 合并第三列
      }
      if (columnIndex === 3) {
        if (row.typeName === row.typeStatus && row.typeName === row.typeAlias) {
          colspan = 0;
        } else if (row.typeAlias === row.typeStatus) {
          colspan = 0;
        }
        // 合并第三列
      }
      return {
        rowspan: rowspan,
        colspan: colspan
      };
    },
        // 合并单元格第一列
    resolveData(arr) {
      var obj = {};
      arr.forEach((val, key) => {
        if (!obj[val.zdname]) {
          obj[val.zdname] = {
            start: key,
            step: 1
          };
        } else {
          obj[val.zdname].step++;
        }
      });
      this.myObj = obj;
      console.log(obj);
    },
    // 合并单元格第二列
    resolveData_two(arr) {
      var obj = {};
      arr.forEach((val, key) => {
        if (!obj[val.typeName + val.zdname]) {
          obj[val.typeName + val.zdname] = {
            start: key,
            step: 1
          };
        } else {
          obj[val.typeName + val.zdname].step++;
        }
      });
      this.myObj_two = obj;
      console.log(this.myObj_two, "this.myObj");
    },
    // 合并单元格第三列
    resolveData_tro(arr) {
      var obj = {};
      arr.forEach((val, key) => {
        if (!obj[val.typeName + val.zdname + val.typeAlias]) {
          obj[val.typeName + val.zdname + val.typeAlias] = {
            start: key,
            step: 1
          };
        } else {
          obj[val.typeName + val.zdname + val.typeAlias].step++;
        }
      });
      this.myObj_tro = obj;
      console.log(this.myObj_tro, "this.myObj");
    },

4.调用下面两个函数，tableData就是总数据，通过下面的三个函数处理合并单元格

  that.resolveData_tro(tableData);
  that.resolveData_two(tableData);
  that.resolveData(ttableData);