elementUI el-table合并单元格

Question

问题遇到的现象和发生背景

我是用下面这个方法合并单元格的，但是连下面不同类的也合并了

<template>
  

 
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" 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>
 
  
</template>
 
<script>
export default {
  name: "OperateAndPriorityPrint",
  data() {
    return {
      rowCount: 0,
      colFields: ['id', 'name','amount1','amount2','amount3'],
      spanArr: [],
      tableData: [{
        id: '1',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '1',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 10
      }, {
        id: '2',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '2',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '2',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
    };
  },
  mounted: function () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.getSpanArr();
  },
 
  methods: {
    /**
     * 分析每一列，找出相同的
     * @param data
     */
    getSpanArr() {
 
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1
            };
          }
        } else {
 
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            if (this.tableData[row][this.colFields[j]] === this.tableData[row - 1][this.colFields[j]]) {
              let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1 + beforeItem.rowspan,
                colspan: 1
              };
              beforeItem.rowspan = 0;
              beforeItem.colspan = 0;
            }else{
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1,
                colspan: 1
              };
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
 
      for (let i=0;i<this.colFields.length;i++){
        for (let j=0;j<this.tableData.length;j++){
          console.log("i="+i + " j="+j);
          // i 表示列 j表示行
          if(j === 0){
            if(this.spanArr[j*this.colFields.length + i].rowspan === 0){
              stack.push(this.spanArr[j*this.colFields.length + i]);
            }
          }else{
            if(this.spanArr[j*this.colFields.length + i].rowspan === 0){
              stack.push(this.spanArr[j*this.colFields.length + i]);
            }else{
              stack.push(this.spanArr[j*this.colFields.length + i]);
              while (stack.length > 0){
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j-len)*this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
    },
 
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    }
  }
}
</script>
 
<style scoped>
 
</style>

怎么解决，才能达到下面的效果呢

Answer 1

• 请看👉 ：ElementUI中el-table组件自定义设置单元格样式