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

最新推荐文章于 2024-08-30 11:16:38 发布

web_hj

最新推荐文章于 2024-08-30 11:16:38 发布

阅读量953

点赞数 1

分类专栏： element-ui

本文链接：https://blog.csdn.net/web_hj/article/details/107553656

版权

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

摘要由CSDN通过智能技术生成

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

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