elementui 合并第一列相同的行

107 阅读1分钟

效果图:

Snipaste_2023-07-18_11-00-48.png

代码

//  :span-method="objectSpanMethod" 
  <el-table 
      :data="tableData" 
      border 
      style="width: 93%" 
      max-height="600px" 
      :span-method="objectSpanMethod">
  </el-table>
 // data
 spanArr: []

// methods
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行,columnIndex === 0 第一列
      if (columnIndex === 0) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    rowspan() {
      let contactDot = 0;
      let spanArr = [];
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          console.log(spanArr);
          spanArr.push(1);
        } else {
          if (item.fl === this.tableData[index - 1].fl) {
            spanArr[contactDot] += 1;
            spanArr.push(0);
          } else {
            contactDot = index;
            spanArr.push(1);
          }
        }
      });
      this.spanArr = spanArr;
    },