react antd Table动态合并单元格

原始数组

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'],
  },
];

name是本文实例需要合并的字段
数据字段包括keynameageaddresstags等假数据，目的是实现将具有相同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)}/>

实例

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

  const getColumns = () => {
    let columns = [
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        align: 'center',
        render(_, row) {
            return {
              children: row.type,
              props: {
                rowSpan: row.rowSpan,
              }
            }
          }
      },{
        title: 'Severity',
        dataIndex: 'age',
        key: 'age',
        align: 'center',
        render(text, row) {
          return ( row.address == 'No know drug allergy' || !row.address  ? <span> --</span> : text ? <span>{text}</span> : <span>--</span>)
          }
      },{
        title: 'Update date',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        render(text, row) {
           return ( text ? <span> {text}</span> : <span> -- </span>)
          }
      },{
          title: 'Allergy/ADR/alert',
          dataIndex: 'address',
          key: 'address',
          align: 'center',
          render(text, row) {
             return (text ? <span> {text}</span> :  <span> --</span>)
            }
        },{
          title: 'FDB',
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          render(text, row) {
             return ( row.address == 'No know drug allergy' || !row.address ? <span> --</span> : text ? <span> Y </span> : <span> N</span>)
            }
        },
    ]
    return columns
  }
    <Table columns={getColumns()} dataSource={createNewArr(data)} bordered pagination={false} />

const data = [
    {
      key: '0',
      name: 'John Brown',
      age: '',
      address: 'New York No. 1 Lake Park',
      type: 'Allergy'
    },
    {
      key: '1',
      name: 'John Brown',
      age: 42,
      address: 'London No. 1 Lake Park',
      type: 'Alert'
    },
    {
      key: '2',
      name: 'John Brown',
      age:22,
      address: '',
      type: 'Allergy'
    },
    {
      key: '5',
      name: '',
      age: 3,
      address: 'Sidney No. 1 Lake Park',
      type: 'ADR'
    },
    {
      key: '6',
      name: 'Joe Black',
      age: 342,
      address: 'No know drug allergy',
      type: 'Allergy'
    },
   {
      key: '8',
      name: 'John Brown',
      age:22,
      address: 'New York No. 1 Lake Park',
      type: 'ADR'
    },  {
      key: '',
      name: 'Joe Black',
      age: 62,
      address: 'Sidney No. 1 Lake Park',
      type: 'Alert'
    },   
  ];

参考
https://www.cnblogs.com/y769062159/p/11940068.html
https://www.cnblogs.com/liumcb/p/13042586.html
https://blog.csdn.net/qq_44213014/article/details/109508346
https://blog.csdn.net/qq_44213014/article/details/109508346