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
      }
    }
  }
},  

!
1.png

皮一下啦!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。