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

最新推荐文章于 2025-09-24 13:22:45 发布

原创

最新推荐文章于 2025-09-24 13:22:45 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Element UI的el-table组件来实现单元格的合并。通过解析请求回来的数据，针对相同店铺进行合并。在实现过程中，需要注意表格的样式设置，尤其是当表格设置为stripe模式时，如何避免第一列被间隔色影响，可以通过添加setCellColor方法改变第一列背景色，保持视觉一致性。

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

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"