一文搞定Vue + element ui中比较复杂的表格合并问题

1. 需求说明

• 后端返回了单独的3条数据，数据格式如下（简略版）。
• 这三条数据中有相同的项，也有不同的。

[
	{
		userName: 'A',
		channlName: '渠道一',
		planNum: 10,
		rate: 0,
		channelId: 111,
		corpName: '主体三'
	},{
		userName: 'B',
		channlName: '渠道二',
		planNum: 20,
		rate: 45%,
		channelId: 222,
		corpName: '主体一'
	},
	{
		userName: 'B',
		channlName: '渠道二',
		planNum: 20,
		rate: 45%,
		channelId: 222,
		corpName: '主体二'
	}
]

• 需要将同一个人及同一个渠道的数据合并在一起。
• 合并维度：投放人，投放渠道，计划加人，实时完成率。
• 并且需要前端算出总加人数，实际加人，以及完成率。
• 效果图如下：
  

2. 实现思路及代码

• 首先要形成一个对象映射（需要合并的项）。
• 根据投放人及投放渠道两个维度分类，则以这两项为键。

// 创建合并映射对象
this.temp = {}
// tableDataTf为后端拿到的数据源
this.tableDataTf.forEach((item, index) => {
	// 如果对象中没有此项，则添加此项 对象的键
   if (!this.temp[item.userName + item.channelId]) {
    // 把对应的值塞进去，并且以count进行计数（有几个）
	// start: 当前索引在不在合并范围之类（合并的起始位置）
    this.temp[item.userName + item.channelId] = { ...item, count: 1, start: index }
  } else {
  	// 这些值是需要前端进行累加处理的
    this.temp[item.userName + item.channelId].rate += item.rate;
    this.temp[item.userName + item.channelId].count++;
  }
  // 总真实加人数
  this.allRealityNumberTf += item.realityNumber * 1;
})
// 累加的数据也从temp对象里面来
for(let objKey in this.temp) {
	// 总目标加人数
    this.allDayTargetTf += this.temp[objKey].dayTarget * 1;
}

• 模板代码

// template
<el-s-table
   :columns="columnsTf"
   :data="tableDataTf"
   :span-method="objectSpanMethod"
   border>
</el-s-table>

• 这里 table 进行了一点封装，使用插件自带的 el-table 是一样的效果
• objectSpanMethod 方法

objectSpanMethod({ row, column, rowIndex, columnIndex }){
  // 这里是需要合并的列
  if (columnIndex === 0 || columnIndex == 1 || columnIndex == 3 || columnIndex === 5) {
    // 如果当前行的下标 == 映射对象记录的开始位置，则开启合并
    if (rowIndex === this.temp[row.userName + row.channelId].start) {
      return {
        // 从start开始，合并count行
        rowspan: this.temp[row.userName + row.channelId].count,  
        // 需要合并的列数
        colspan: 1  
      }
    } else {
      // start + 1 到 start + count行，这些行归 0，不作显示（被合并的项）
      // 这些行在表格里面其实还在，只是不显示了
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
},

• 主要的难点是在上面那个映射对象 temp，这里比较简单的。

1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(文底有V)