element UI table 行动态合并

话不多说，直接上代码

:span-method="objectSpanMethod" （ElementUI 官方文档）

rowspan：合并行数

colspan：合并列数

<el-table
  ref="refTable"
  :data="list"
  :span-method="dataSpanMethod"
>
  <el-table-column show-overflow-tooltip prop="depart_name" label="部门名称" min-width="100" />
  <el-table-column show-overflow-tooltip prop="team_name" min-width="100" label="团队名称">
  <el-table-column show-overflow-tooltip prop="service_line" min-width="100" label="业务线">
  <el-table-column show-overflow-tooltip prop="cost_type0" min-width="100" label="办公费">
  <el-table-column show-overflow-tooltip prop="cost_type1" min-width="100" label="差旅费">
</el-table>

getSpanArr(data) {
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      this.spanArr.push(1);
      this.index = 0
    } else {
      if (data[i].depart_name === data[i - 1].depart_name) {
        this.spanArr[this.index] += 1;
        this.spanArr.push(0);
      } else {
        this.spanArr.push(1);
        this.index= i;
      }
    }
  }
},

dataSpanMethod({ row, column, rowIndex, columnIndex }) {
  if(columnIndex === 0){
    if(row.depart_id == 9){//加入判断条件
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col
      }
    }
  }
},  

皮一下啦！！！