如果您需要在 Ant Design 的 Table 组件中嵌套 Table 组件，可以使用 `expandedRowRender` 属性来实现。下面是一个示例代码：
```jsx
import React from 'react';
import { Table } from 'antd';
const columns = [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' },
];
const data = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
},
{
key: 12,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 3 Lake Park',
},
],
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 21,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: 22,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 3 Lake Park',
},
],
},
{
key: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 3 Lake Park',
children: [
{
key: 31,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: 32,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
},
],
},
];
const App = () => {
const expandedRowRender = (record) => {
const columns = [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' },
];
const data = record.children;
return <Table columns={columns} dataSource={data} pagination={false} />;
};
return <Table columns={columns} dataSource={data} expandable={{ expandedRowRender }} />;
};
export default App;
```
在这个示例代码中，我们定义了一个 `expandedRowRender` 函数，在这个函数中，我们使用 Table 组件来渲染子表格。然后，在主表格中，我们将 `expandedRowRender` 函数传递给 `expandable` 属性来实现嵌套表格的效果。具体地，当用户点击主表格中的一个行时，它的子表格就会被展开。
扫一扫
5554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
