el-table合并单元格

效果

使用技术【element】el-table
1、
添加属性方法 :span-method=“dataSpanMethod”

<el-table
              :data="subFactors"
              stripe
              max-height="450"
              :span-method="dataSpanMethod"
              style="width: 100%"
            >

2、数组合并

//切换格式（在调后台接口，有数据返回调用 this.getData() ）
    getData() {
      let arr = JSON.parse(JSON.stringify(this.subFactors));
      let str = [];
      let newArr = [];
      arr.map((value) => {
        for (let j = 0; j < value.factorSchemes.length; j++) {
          var db = {
            factorId: value.factorId,
            factorName: value.factorName,
            factorSchemes: [value.factorSchemes[j]],
          };
          str.push(db);
        }
        return (newArr = str);
      });
      this.$set(this, "subFactors", newArr);
      this.getSpanArr(newArr);
    },

3、区分需要合并列

getSpanArr(data, val) {
      if (val) {
        this.spanArr2 = [];
        for (var j = 0; j < data.length; j++) {
          if (j === 0) {
            this.spanArr2.push(1);
            this.pos1 = 0;
          } else {
            if (data[j].factorName === data[j - 1].factorName) {
              this.spanArr2[this.pos1] += 1;
              this.spanArr2.push(0);
            } else {
              this.spanArr2.push(1);
              this.pos1 = j;
            }
          }
        }
      } else {
        this.spanArr = [];
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
          } else {
            if (data[i].factorName === data[i - 1].factorName) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      }
    },

4、合并列

dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        //合并行的行为只在第一列进行
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

完美搞定。。。。。