使用element 表格进行动态合并单元格

 

步骤分三步：

1、获取数据

2、拿到list之后使用方法去遍历条件相同的值 （判断条件自定义） 

3、合并行，可多行添加

 

_____

定义

spanArr: [ ]

position: 0

_____

 

：这里是拿到数据遍历相同的值

 rowspan() {
     this.tableData.forEach((item, index) => {
       if (index === 0) {
         this.spanArr.push(1);
         this.position = 0;
       } else {
　　　　　　//这里是判断的条件
         if ((this.tableData[index].name === this.tableData[index - 1].name) && (this.tableData[index].channel === this.tableData[index - 1].channel)) {
           this.spanArr[this.position] += 1;
           this.spanArr.push(0);
         } else {
           this.spanArr.push(1);
           this.position = index;
         }
       }
     });
　　}

 

：合并行，可多行添加

 

//这里使用element 官方方法
spanMethod({ rowIndex, columnIndex }) {
        //表格合并行
        if (columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 2) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 3) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 14) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }