element ui表格相同内容自动合并

  一开始觉得合并单元格很困难，什么鬼，后来仔细查看api,发现是可以实现的，特此记录下，直接看代码，

项目需求是第一列和第二列还有第16列需要相同内容进行合并，所以判断条件是不同的；

实现后效果如下：

 

 

<el-table
  :data="tableDataOne"
  style="width: 100%"
  :span-method="objectOneMethod">

</el-table>

methods:{　　　

let spanOneArr = [],
      spanTwoArr = [],
      concatOne = 0,
      concatTwo = 0;
  tableData.forEach((item,index)=>{
    if(index === 0){
      spanOneArr.push(1);
      spanTwoArr.push(1);
    }else{
      if(item.topic === tableData[index - 1].topic){ //第一列需合并相同内容的判断条件
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      }else{
        spanOneArr.push(1);
        concatOne = index;
      };
      if(item.name === tableData[index - 1].name){//第二列和第16列需合并相同内容的判断条件

        spanTwoArr[concatTwo] += 1;
        spanTwoArr.push(0);
      }else{
        spanTwoArr.push(1);
        concatTwo = index;
      };
    }
  });
  return  {
    one: spanOneArr,
    two: spanTwoArr
  }
},

objectOneMethod({ row, column, rowIndex, columnIndex }) {
  if(columnIndex === 0 ) {
    const _row = (this.setTable(this.tableDataOne).one)[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    };
  }
  if(columnIndex === 1 || columnIndex === 15) {
    const _row = (this.setTable(this.tableDataOne).two)[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    };
  }
},

}；
希望能帮到有需要的童鞋们；