el-table合并表格第一列的相同内容的表格行

832 阅读1分钟

image.png

<el-table :data="tableData" border style="width: 100%; margin-top: 20px" :span-method="mergeCell">
      <el-table-column prop="projectName" label="项目名称" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1(元)">
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2(元)">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3(元)">
      </el-table-column>
    </el-table>

需求:合并表格第一列中,项目名称相同的单元列

    // 合并 项目名称 相同的列单元格
    mergeCell ({ row, column, rowIndex, columnIndex }) {
      let spanOneArr = []
      let concatOne = 0;
      this.tableData.map((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //第一列需合并相同内容的判断条件
          if (item.projectName === this.tableData[index - 1].projectName) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          };
        }
      });
      // 需要合并的列号 第1列 不可改
      if (columnIndex === 0) {
        const _row = spanOneArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },