@[TOC](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'],
},
];
```
## 原始数据 使用Table展示如下
## name是本文实例需要合并的字段
数据字段包括`key``name``age``address``tags`等假数据，目的是实现将具有相同`name`的元素合并为一个数组，然后将这些数组展开成为符合antd Table渲染条件的新数组，如下：
## 合并结果如下
# 合并单元格解决方案
## 合并函数
```
//合并数组单元格
createNewArr=(data)=>{
return data.reduce((result, item) => {
//首先将name字段作为新数组result取出
if (result.indexOf(item.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传入数据之前对数据做处理
```
>###### 作者：黄仕达
>编辑人：苑百琦
Ps:引用请标明出处，感谢！
> 本文由博客一文多发平台 [OpenWrite](https://openwrite.cn?from=article_bottom) 发布！