antd表格合并问题

1,012 阅读1分钟

antd表格合并问题

表格数据只有部门与姓名两个字段,要求将表格中相同的部门名上下合并,按照antd的table组件要求,需要给每条数据添加rowSpan字段,其数值代表向下合并几个单元格,0代表被上方的单元格合并

image.png

//后端只返回部门与姓名两个字段,rowSpan需要前端添加
[
 {
  dep:'开发部',
  name:'孙二',
  //rowSpan:3,
 },
 {
  dep:'开发部',
  name:'张三',
  //rowSpan:0,
 },
  {
  dep:'开发部',
  name:'赵四',
  //rowSpan:0,
  
 },
  {
  dep:'市场部',
  name:'王五',
  //rowSpan:2,
 },
  {
  dep:'市场部',
  name:'李六',
  //rowSpan:0,
 },
]
//我的解决方案
    tableDatas.map((item, index, arr) => {
      if (index !== 0 && item.dep === arr[index - 1].dep) {
        item.rowSpan = 0;
      } else {
        item.rowSpan = 1;
        rowIndex++;
      }
    })
    tableDatas.reduce((prev, item) => {
      if (item.rowSpan === 0) {
        prev.rowSpan += 1;
        return prev
      } else {
        return item
      }
    })