el-table合并行合并列

发布时间 2023-04-21 11:06:34作者: 枫若

1.合并多行

    objectSpanMethod ({ row, column, rowIndex, columnIndex }, list) {
      // console.log("objectSpanMethod", columnIndex, list)
      if (columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
        if (rowIndex == 0) {
          return {
            rowspan: list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

    },

 

 //动态合并行
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // columnIndex === xx 找到第xx列,实现合并随机出现的行数
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 因为要合并的行数是不固定的,此函数是实现合并随意行数的功能
    getSpanArr () {
        this.spanArr=[]
        let pos = 0
        for (var i = 0; i < this.dataTable.length; i++) {
          if (i === 0) {
            // 如果是第一条记录(即索引是0的时候),向数组中加入1
            this.spanArr.push(1);
            pos = 0;
          } else {
            if (this.dataTable[i].name=== this.dataTable[i - 1].name) {
              this.spanArr[pos] += 1;
              this.spanArr.push(0);
            } else {
              // 不相等push 1
              this.spanArr.push(1);
              pos = i;
            }
          }
      }
    },

  

 

2.合并多列

 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.pushType == 2) {
        if (columnIndex == 3) {
          return [1, 4]
        } else if (columnIndex == 4 || columnIndex == 5 || columnIndex == 6) {
          return [0, 0]
        }
      }
    },