antd表格嵌套表格

Ant Design的表格组件支持嵌套表格功能。具体可以通过以下步骤实现：

1. 在columns数组中，添加一个子表格的render方法。该方法返回一个新的表格组件，其中columns属性为子表格的列。

2. 在父表格的dataSource数据中，为每一个需要展示子表格的行添加一个children属性。该属性为一个数组，包含子表格中的数据。同时，子表格数据的格式也需要与父表格数据的格式一致。

下面是一个简单的示例代码：

import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    render: () => <a>展开</a>,
  },
];

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. 1 Lake Park',
      },
      {
        key: 12,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const NestedTable = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  const onExpand = (expanded, record) => {
    if (expanded) {
      setExpandedRowKeys([...expandedRowKeys, record.key]);
    } else {
      setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key));
    }
  };

  return (
    <Table
      columns={columns}
      dataSource={data}
      expandedRowKeys={expandedRowKeys}
      onExpand={onExpand}
      rowKey="key"
      expandable={{
        expandedRowRender: (record) => (
          <Table
            columns={columns}
            dataSource={record.children}
            rowKey="key"
          />
        ),
      }}
    />
  );
};

export default NestedTable;

在这个示例中，我们创建了一个包含两行数据的父表格。第一行数据包含一个子表格，我们使用了children属性为其指定子表格数据。同时，在columns数组中添加了一个render方法，用于展示子表格。在父表格组件中，我们使用了antd的expandable属性，指定了展开子表格的方式和渲染方法。

希望这个示例能够帮助你了解如何在Ant Design的表格组件中实现嵌套表格功能。