react antd Table动态合并单元格

开发者尚勤技术 2022年11月18日

0 收藏 524 点赞 5,156 浏览 1366 个字

示例数据

原始数组

const data = [
  {
    key: '0',
    name: 'John Brown',
    age:22,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '1',
    name: 'John Brown',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '2',
    name: 'John Brown',
    age:22,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '5',
    name: 'Joe Black',
    age: 3,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '6',
    name: 'Joe Black',
    age: 342,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '7',
    name: 'Joe Black',
    age: 62,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

原始数据使用Table展示如下

name是本文实例需要合并的字段

数据字段包括key``name``age``address``tags等假数据，目的是实现将具有相同name的元素合并为一个数组，然后将这些数组展开成为符合antd Table渲染条件的新数组，如下：

合并结果如下

合并单元格解决方案

合并函数

//合并数组单元格
  createNewArr=(data)=>{
    return data.reduce((result, item) => {
    //首先将name字段作为新数组result取出
        if (result.indexOf(item.name) < 0) {
            result.push(item.name)
        }
        return result
    }, []).reduce((result, name) => {
    //将name相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
      const children = data.filter(item => item.name === name);
      result = result.concat(
        children.map((item, index) => ({
          ...item,
          rowSpan: index === 0 ? children.length : 0,//将第一行数据添加rowSpan字段
        }))
      )
      return result;
    }, [])
  }

使用方法

const columns = [
     {
       title: '分类名称',
       dataIndex: 'name',
       key: 'name',
       render(_, row) {
           return {
             children: row.name,
             props: {
               rowSpan: row.rowSpan,
             }
           }
         }
     },
]//Table传入数据之前对数据做处理
<Table columns={columns} dataSource={this.createNewArr(data)}/>