el-table合并行

el-table合并行

 <el-table
    :data="tableDataThird"
    :header-cell-style = "{background:'#f6f7fb'}"
    :span-method="objectSpanMethod"
    border
    ></el-table>
 data(){
  return{
      spanArr:[]
   }
}
//获取的后台数据
getdata(){
   if(res.data.length>0){
   this.getSpanArr(res.data)
   }
},
//表格合并行
getSpanArr(data) {
      let pos = 0
      for (let i = 0; i < data.length; i++) {
          if (i === 0) {
              this.spanArr.push(1);
              pos = 0;
          } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].code === data[i - 1].code) {
                  this.spanArr[pos] += 1;
                  this.spanArr.push(0);
              } else {
                  this.spanArr.push(1);
                  pos = i;
              }
          }
      }
  },
 //合并行
   objectSpanMethod({row, column, rowIndex, columnIndex}) {
       if (columnIndex === 0 || columnIndex === 1 ) {
           const _row = this.spanArr[rowIndex];
           const _col = _row > 0 ? 1 : 0;
           return {
           // [0,0] 表示这一行不显示， [2,1]表示行的合并数
             rowspan: _row,
             colspan: _col
           };
       }
   }