el-table 二维数组合并行

话不多说直接上解决方法

使用的是 span-method 属性的方法 Function({ row, column, rowIndex, columnIndex })

合并行最后的样子

1.二维数组不做处理的话，效果是这个样子的

2.首先把二维数组转换为一维数组

循环遍历把二级对象全部转为一级对象

res.data.forEach((item,index)=>{
          for(let i=0;i<item.children.length;i++){
            let current={
              id:item.id,
              zhandian:item.zhandian,
              pingtai:item.pingtai,
              sub_buy_commission: item.children[i].buy_commission,
              sub_buy_exchange: item.children[i].buy_exchange,
              sub_cost: item.children[i].cost,
              sub_cross_send: item.children[i].cross_send,
              sub_exchange:item.children[i].exchange,
              sub_id: item.children[i].id,
              sub_local_send: item.children[i].local_send,
              sub_sort: item.children[i].sort,
              sub_tixi: item.children[i].tixi
            }
            this.tableData.push(current);
          }

转换完就是下面这个样子了

2.接下来就是确定要和并的行数了

思路：

getSpanArr() {
     this.tableData.forEach((item,index)=>{
       if(index==0){
         //这个数组用来存储要合并的行数
         this.spanArr.push(1);
         this.spanArr1.push(1)
         //保存数组下标
         this.tableIndex=0
         this.tableIndex1=0;
       }else{
       	    //this.tableData[index].zhandian  要合并行的字段
       	    //因为我是要合并第一列和第二列所以这里面会有两个判断
       	    
         if(this.tableData[index].zhandian==this.tableData[index-1].zhandian){      	
           this.spanArr[this.tableIndex]=this.spanArr[this.tableIndex]+1;
           this.spanArr.push(0)
           if(this.tableData[index].pingtai==this.tableData[index-1].pingtai){
             this.spanArr1[this.tableIndex1]=this.spanArr1[this.tableIndex1]+1;
             this.spanArr1.push(0);
           }else{
             this.spanArr1.push(1);
             this.tableIndex1=index
           }
         }else{
           this.spanArr.push(1);
           this.tableIndex=index
           this.spanArr1.push(1);
           this.tableIndex1=index
         }
       }
     })
    },

这是spanArr数组输出的值

3.最后就是合并了

rowIndex—当前行
columnIndex —当前列

rowspan：合并的行数
colspan：合并的列数

 dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {//合并行的行为只在第一列进行
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
      }
      if(columnIndex===1){//合并行的行为只在第二列进行
          const _row = this.spanArr1[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
      }
    },