效果
实现
官方文档合并单元格 : 3x.ant.design/components/…
源码:
const { Table } = antd;
let rowSpanIndex = 0; //合并单元格大行索引值
let rowSpanCount = 0; //记录每个大行合并单元格行数
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
render: (value, row, index) => {
return {
children: value,
props: {
rowSpan:row.rowSpan
},
};
},
},
{
title: 'Phone',
colSpan: 0,
dataIndex: 'phone',
}
];
//数据源
const data = [
{
key: '1',
name: '张三',
tel: '0571-22098909',
phone: 18889898989,
},
{
key: '2',
name: '李四',
tel: '0571-22098909',
phone: 18889898888,
},
{
key: '3',
name: '王五',
tel: '0575-22098909',
phone: 18900010002,
},
{
key: '4',
name: '赵六',
tel: '0575-22098909',
phone: 18900010002,
},
{
key: '5',
name: '周七',
tel: '0575-55098909',
phone: 18900010002,
},
{
key: '6',
name: '吴八',
tel: '0575-88098909',
phone: 18900010002,
},
];
const getNewData = (data,field)=>{
let count = 0;//重复项的第一项
let indexCount = 1;//下一项
while (indexCount<data.length){
var item = data.slice(count,count+1)[0];//获取没有比较的第一个对象
if(!item.rowSpan){
item.rowSpan = 1;//初始化为1
}
if(item[field] === data[indexCount][field]){//第一个对象与后面的对象相比,有相同项就累加,并且后面相同项设置为0
item.rowSpan++;
data[indexCount].rowSpan = 0;
}else {
count = indexCount;
}
indexCount++;
}
return data
}
ReactDOM.render(<Table columns={columns} dataSource={getNewData(data,'tel')} bordered rowClassName={record => {
let className = '';
if (record.rowSpan > 0) rowSpanCount = record.rowSpan;
if (rowSpanIndex % 2 === 1) className = 'darkRow';
if (record.rowSpan == 0) rowSpanCount--;
if (rowSpanCount === 1) rowSpanIndex++;
return className;
}}/>, mountNode);
复制代码