将elementui table 每一行相同值得列进行合并

效果如图:

 根据elementui 的合并代码基本满足不了需求

话不多说上代码:

//合并行和列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for(let i = 0;i < this.spanArr.length; i++){
        if(rowIndex === i){
          return {
            rowspan: this.spanArr[i][columnIndex]>0? 1: 0,
            colspan: this.spanArr[i][columnIndex]
          }
        }
      }
    },


//将数据处理  类似于[[1,1,3,0,0],[],[],[]]
    getSpanArr(data) {　
      for (var i = 0; i < data.length; i++) {
          let keys = Object.keys(data[i])
          keys.unshift("www") //占位
          keys.unshift("ddd") //占位
          keys.pop() //占位对应
          let arr = [],num = 0
          //console.log(keys)
          keys.forEach((it,idx) => {
            if(idx === 0){
              arr.push(1)
              num = 0
            }else if(idx === 1){
              arr.push(1)
              num = 1
            }else{
              // 判断当前元素与上一个元素是否相同
              if (data[i][keys[idx]]&&data[i][keys[idx - 1]]&&data[i][keys[idx]] === data[i][keys[idx - 1]]) {
                //console.log(data[i][keys[idx]],data[i][keys[idx - 1]], idx)
                arr[num] += 1;
                arr.push(0);
              } else {
                //console.log(idx)
                arr.push(1);
                num = idx;
              }
            }
          })
          this.spanArr.push(arr)
          console.log(this.spanArr)
      }
    },

打印结果为:

 

因为是合并列,所以要将后台拿到的数据处理为2维数组,每条数据为一行数据

列:[

[1,1,2,0,3,0,0], //将此行的第3,4合并为一列,第5,6,7合并为一列

[1,5,0,0,0,0], //将此行的第2,3,4,5合并为一列

[2,0,4,0,0,0] //将此行的第1,2合并为一列,第3,4,5,6合并为一列

]