1. 简介
众所周知，table表头只支持列合并，我们可以使用 column 里的 colSpan 进行设置。
而表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
以上这些antd里都有介绍哈哈
话不多说，直接上实际案例需求
2. 案例
需求：把数据中相同的uid行合并展示
3.代码实现（React Hooks）
import React, { useState } from 'react';
import { Table } from 'antd';
interface IProps {}
const Index: React.FC<IProps> = () => {
const [dataList,setDataList] = useState<any[]>([]); // 列表数据
/**
* changeData(*，*)
* 参数一：列表数据
* 参数二：要合并的列名称
*/
useEffect(() => {
setDataList(changeData([这里是数据], 'uid'));
},[])
const columns: any = [
{
title: 'uid',
dataIndex: 'uid',
onCell: (_: any, index: any) => {
return { rowSpan: _.rowSpan };
},
},
{
xxxxx此处省略一下，懂得都懂xxxxxxx
},
];
// 函数-合并单元格（各位看官看这里，重头戏在这里）
const changeData = (data: any, field: any) => {
let count = 0;
let indexCount = 1;
try {
while (indexCount < data.length) {
let item = data.slice(count, count + 1)[0];
if (!item.rowSpan) {
item.rowSpan = 1;
}
if (item[field] === data[indexCount][field]) {
item.rowSpan++;
data[indexCount].rowSpan = 0;
} else {
count = indexCount;
}
indexCount++;
}
} catch {}
return data;
};
return (
<Table columns={columns} dataSource={dataList} bordered />
);
};
export default Index;
