原始数组
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是本文实例需要合并的字段
数据字段包括keyname
ageaddress
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)}/>
实例
//合并数组单元格
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