element UI el-table 实现单元格的合并

要实现上图的效果第一例根据数据合并是同一个店铺就合并

1.请求数据请求回来时解析数据

formatData:function(list){
  for(let i in list){
    list[i].time = list[i].start_at +' - '+list[i].end_at;   //忽略  
    //这里是关键*******  
    if(i == 0){
      this.rowspans.push(1);
      this.posi = 0;
    }else{
      if(list[i].shop_id === list[i-1].shop_id){
        list[i].shop_name = '';
        this.rowspans[this.posi ] += 1;
        this.rowspans.push(0)
      }else{
        this.rowspans.push(1);
        this.posi = i;
      }
    }
  }
  return list;
},

<el-table
  :data="tableData"    //数据
  :span-method="spanMethod"   //  关键*******
  :cell-style="setCellColor"
  border
  stripe
  row-key="id"
  :height="343"
  style="width: 100%">
  <el-table-column
    v-for="(item,index) in tableHeader"
    :key="index"
    :prop="tableHeader[index].name"
    :headerAlign="'center'"
    :align="item.align"
    :label="item.title"
    :width="item.width"
    >
  </el-table-column>
</el-table>

spanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const _row = this.rowspans[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

========结束了，不理解的将 this.spanArr 输出看下就清楚了

样式注意表格设置了 stripe 有间隔色不希望影响到第一列在表格中添加 setCellColor

setCellColor({row, column, rowIndex, columnIndex}){
  if(columnIndex === 0){
    return {
      background:'#fff'
    }
  }
},

改变第一列的背景颜色就不受stripe间隔色的影响了

element UI el-table 实现单元格的合并

相关推荐