把数据中相同的uid行合并展示
image.png
代码实现（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;
