vue 合并行

<el-table border :data="list" :span-method="objectSpanMethod">
    <el-table-column label="第一列" align="center" prop="column1" width="110px" />
    <el-table-column label="第二列" align="center" prop="column2" width="110px" />
    <el-table-column label="第三列" align="center" prop="column3" width="110px" />
    <el-table-column label="第四列" align="center" prop="column4" width="110px" />
</el-table>


data() {
    return {
        mergeObj:{},mergeArr:['column1','column2'] //合并前两列
    }
},created() {
    this.getList();
},
methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      //row:当前行的值，当前列的值，行的下标，列的下标
      if(this.mergeArr.indexOf(column.property) !== -1){ //判断列的属性
        if(this.mergeObj[column.property][rowIndex]){ //判断是不是0
          return [this.mergeObj[column.property][rowIndex],1];
        }else{
          return [0,0]; //如果为0则需要合并的行
        }
      }

    },getSpanArr(data){
      this.mergeArr.forEach((key,idx) =>{
        let count = 0;//用来记录需要合并航的起始位置
        this.mergeObj[key] = []; //记录每一列的合并信息
        data.forEach((item,index)=>{
          //index == 0表示数据为第一行，直接push一个1
          if(index == 0){
            this.mergeObj[key].push(1);
          }else{
            //判断当前行是否与上一行其值相等，如果相等在count记录的位置=1，表示当前行需要合并，并push一个0作为占位
            if(item[key] === data[index -1][key]){
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            }else{
              count = index; //如果当前行和上一行值不相等
              this.mergeObj[key].push(1); //重新push一个1
            }
          }
        });
      });
    },
    getList(){
        this.loading = true;
        getAll().then(response => {
            this.list = response.data;
            this.loading = false;
            this.getSpanArr(this.list);
      });
    }
}