在 Ant Design 的 Table 组件中
嵌套子表格，需要对
数据进
行一些处理。以下是一个示例：
```jsx
import
React, { useState } from '
react';
import { Table } from '
antd';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: '11',
name: 'Child Brown',
age: 16,
address: 'New York No. 2 Lake Park',
},
],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
children: [
{
key: '21',
name: 'Child Green 1',
age: 16,
address: 'London No. 2 Lake Park',
},
{
key: '22',
name: 'Child Green 2',
age: 18,
address: 'London No. 3 Lake Park',
},
],
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const expandedRowRender = (record) => {
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const data = record.children.map((child) => ({ ...child, key: child.key }));
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const TableWithNestedTable = () => {
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
const handleExpand = (expanded, record) => {
setExpandedRowKeys(expanded ? [record.key] : []);
};
return (
<Table
columns={columns}
dataSource={data}
expandedRowRender={expandedRowRender}
onExpand={handleExpand}
expandedRowKeys={expandedRowKeys}
/>
);
};
export default TableWithNestedTable;
```
上面的代码中，我们通过 `data` 定义了
表格的
数据。每个
数据项都有一个 `children` 属性，它是一个
数组，用于
嵌套子表格。
在 `columns` 中，我们只定义了三列，因为
子表格中的列与父
表格中的列相同。
`expandedRowRender` 函
数用于渲染
子表格。它接收一个参
数 `record`，即
当前行的
数据项。我们可以通过 `record.children`
获取该
行的
子表格数据，并且使用 `map` 方法将其转换为 Ant Design Table 组件所需的格式。
在 `TableWithNestedTable` 组件中，我们使用 `useState` 定义了一个状态变量 `expandedRowKeys`，用于存储展开
行的键值。
在 `handleExpand` 函
数中，我们通过 `setExpandedRowKeys` 方法将展开
行的键值添加到 `expandedRowKeys`
数组中。这个函
数会在用户
点击展开/收起按钮时触发。
最后，在 `Table` 组件中，我们通过 `expandedRowRender` 属性将
子表格渲染函
数传递给 Ant Design Table 组件，并且通过 `onExpand` 和 `expandedRowKeys` 属性控制展开
行的状态。
2697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
