antd表格中嵌套表格数据处理

在 Ant Design 的 Table 组件中嵌套子表格，需要对数据进行一些处理。以下是一个示例：

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` 属性控制展开行的状态。