REACT antd 嵌套table组件

如果您需要在 Ant Design 的 Table 组件中嵌套 Table 组件，可以使用 `expandedRowRender` 属性来实现。下面是一个示例代码：

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` 属性来实现嵌套表格的效果。具体地，当用户点击主表格中的一个行时，它的子表格就会被展开。