element ui 表格合并列

element ui 表格合并列

显示效果：

代码

 <el-table
        :data="tableData"
        style="width: 100%"
        :span-method="objectSpanMethod"
        border
        class="reset-el-table"
      >
        <el-table-column prop="sentenceName" label="" width="180">
        </el-table-column>
        <el-table-column prop="ways" label="练习方式" width="180">
        </el-table-column>
        <el-table-column prop="count" label="练习次数"> </el-table-column>
        <el-table-column label="最近评测分">
          <template slot-scope="scope">
            {{ Math.round(scope.row.latelyScore) }}
          </template>
        </el-table-column>
        <el-table-column label="最高/最低评测分">
          <template slot-scope="scope">
            {{ Math.round(scope.row.maxScore) }} /
            {{ Math.round(scope.row.minScore) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="checkSentence(scope.row)"
              size="small"
              >查看趋势</el-button
            >
          </template>
        </el-table-column>

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if(!this.tableData || this.tableData.length<=2){
        return
      }
      if (columnIndex === 0&& this.tableData[rowIndex].sentenceId) { 
        if (
          rowIndex < this.tableData.length - 1 &&
          this.tableData[rowIndex].sentenceId === this.tableData[rowIndex + 1].sentenceId
        ) {//如果两项的sentenceId一样的话
          return {
            rowspan: 2, //合并一行
            colspan: 1, //合并两列
          }
        } else if (rowIndex!==0&&
          this.tableData[rowIndex - 1].sentenceId === this.tableData[rowIndex].sentenceId
        ) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }

    },