elementui表格自动合并自动计算需要合并的列数

先看效果

打印一下我的方法计算出来的每列的合并数组

每个数组代表一列，数组中的每个元素代表这一列的这一行的这一个元素需要合并的数量

//页面
 <el-table
            :id="id"
            :highlight-current-row="highlightCurrentRow!==false?true:false"
            :data="tableDataWidhtOrder"
            :span-method="objectSpanMethod"
            ref="table"
            @select="select"
            @select-all="selectAll"
            @row-click="clickTr"
            @cell-click="clickTd"
            @selection-change="handleSelectionChange"
            @sort-change="sortChange"
            :row-class-name="tableRowClassName"
            :row-style="rowStyleCb"
            :border="border"
            :show-summary="showsummary"
    >

//列表表头结构
tableHeader:[
    {
      label:'站名',
      prop:'stationName',
    },
    {
      label:'车型',
      prop:"vehicleType",
      isMerge:false
    },
    {
      label:'清分',
      prop:"carType",
      children:[
        {
          label:'数量',
          prop:"splitCarMount",
        },
        {
          label:'金额',
          prop:"splitCarMoney",
        }
      ]
    },
    {
      label:'合计',
      prop:"sumMoney",
    }
  ],

 //因为以上表头结构  所以需要有个方法  把子菜单的整合出来到一个数组
   doTableCol(arrs){  //TODO  这里需要优化写法  递归执行  现在没空
    arrs.forEach((ites)=>{
      if(ites.children&&ites.children.length){
        doTableCol(ites.children)
      }else{
        this.mergeList.push(ites)
      }
    })
  }
//合并列
flitterData(arr){
    let forceArr = []
    for(var i = 0;i<this.mergeList.length;i++){
      forceArr[i] ={concat:0,rows:[1]}
    }
    arr.forEach((item,index)=>{
      if(index!= 0){  //是看上一项和当前是否一样  如果是0 就没有上一项  这样写不会影响结果
        this.mergeList.forEach((items,idx)=>{
          if(items.isMerge===false){  //就是这个参数
            for(var m = 0;m<arr.length;m++){
              forceArr[idx].rows.push(1)  //当有些列不进行合并 就可以通过表头传值加个参数
            }
          }else{
            if(item[items.prop] === arr[index - 1][items.prop]){ //循环  自动计算需要合并的项以及合并多少
                let curNum = forceArr[idx].concat
                forceArr[idx].rows[curNum]=forceArr[idx].rows[curNum]?forceArr[idx].rows[curNum]:1
                forceArr[idx].rows[curNum]+=1
                forceArr[idx].rows.push(0);
            }else{
                forceArr[idx].rows.push(1)
                forceArr[idx].concat = index   //记录下是列的哪个  下次合并就从这里开始  （上一行）
            };
          }
        })
      }
    });
    return  {
      forceArr:forceArr
    }
  },

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      for(let num =0;num<11;num++){
        if(columnIndex === num ) {
          const _row = (this.flitterData(this.tableData).forceArr[num]).rows[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
  },