React Antd Table 实现单元格自动合并

在 React Antd Table 中，我们可以使用 colSpan 和 rowSpan 属性来实现单元格的自动合并。通过指定 colSpan 和 rowSpan 的值，可以控制单元格跨越的行数和列数，从而实现行列合并的效果。
下面是一个简单的示例，展示如何使用 colSpan 和 rowSpan 实现单元格的合并：

import React from 'react';
import { Table } from 'antd';
const data = [
{
key: '1',
name: '张三',
age: 32,
address: '北京市朝阳区',
},
{
key: '2',
name: '李四',
age: 42,
address: '北京市海淀区',
},
{
key: '3',
name: '王五',
age: 32,
address: '北京市朝阳区',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: (text, row, index) => {
// 根据条件判断是否需要合并单元格
if (index === 0) {
return <b>{text}</b>; // 合并第一行的单元格，添加样式
} else {
return text; // 其他行正常显示
}
},
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
];
const MyTable = () => (
<Table columns={columns} dataSource={data} />
);