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

2. 

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

3.

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间隔色的影响了