使用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
          };
        }
      }
原文地址:https://www.cnblogs.com/king94Boy/p/14101617.html