antd react table 嵌套子表格例子

在React中使用Ant Design的Table组件嵌套子表格，可以通过在某一列中嵌入另一个Table组件来实现。以下是一个简单的例子：

import React from 'react';
import { Table } from 'antd';
 
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: '1-1',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '1-2',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
  },
  // ... 更多数据
];
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Children',
    dataIndex: 'children',
    key: 'children',
    render: (_, record) => (
      <Table
        columns={columns}
        dataSource={record.children}
        pagination={false}
        bordered
      />
    ),
  },
];
 
const NestedTable = () => (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{ pageSize: 5 }}
    bordered
  />
);
 
export default NestedTable;

在这个例子中，我们定义了一个名为NestedTable的组件，它渲染了一个嵌套子表格的Table。父表格的数据源data包含了一个children字段，该字段又是一个数组，包含了子表格的数据。在父表格的列配置columns中，Children列使用render属性渲染了一个新的Table组件，并将子数据源传递给它。这样就实现了父子表格的嵌套。