Antd的Table组件嵌套Table以及选择框联动操作

Antd的Table组件嵌套Table以及选择框联动操作攻略

Ant Design (Antd) 是一个流行的 React UI 组件库，其中的 Table 组件提供了丰富的功能和灵活的配置选项。本攻略将详细讲解如何在 Antd 的 Table 组件中嵌套另一个 Table 组件，并实现选择框的联动操作。

步骤一：准备工作

首先，确保你已经安装了 Antd 和 React，并正确引入了相关的依赖。

npm install antd

步骤二：创建外层 Table 组件

首先，我们需要创建一个外层的 Table 组件，用于展示主要的数据。在这个示例中，我们假设数据源是一个数组 dataSource，每个元素包含 id、name 和 children 字段。

import { Table } from 'antd';

const OuterTable = ({ dataSource }) => {
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
  ];

  return <Table dataSource={dataSource} columns={columns} />;
};

步骤三：创建内层 Table 组件

接下来，我们需要在外层 Table 组件的每一行中嵌套一个内层的 Table 组件，用于展示子数据。在这个示例中，我们假设子数据存储在 children 字段中，是一个数组。

import { Table } from 'antd';

const InnerTable = ({ children }) => {
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
  ];

  return <Table dataSource={children} columns={columns} />;
};

步骤四：在外层 Table 组件中使用内层 Table 组件

现在，我们可以在外层 Table 组件的每一行中使用内层 Table 组件来展示子数据。为了实现这个嵌套效果，我们需要在外层 Table 组件的 render 方法中返回一个包含内层 Table 组件的 JSX 元素。

import { Table } from 'antd';

const OuterTable = ({ dataSource }) => {
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
    {
      title: 'Children',
      key: 'children',
      render: (_, record) => <InnerTable children={record.children} />,
    },
  ];

  return <Table dataSource={dataSource} columns={columns} />;
};

步骤五：选择框联动操作

如果我们希望实现选择框的联动操作，可以在内层 Table 组件中添加一个选择框，并通过状态管理来实现联动效果。

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

const InnerTable = ({ children }) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
  ];

  return (
    <>
      <Checkbox.Group value={selectedRowKeys} onChange={onSelectChange} />
      <Table
        dataSource={children}
        columns={columns}
        rowSelection={rowSelection}
      />
    </>
  );
};

在这个示例中，我们使用了 useState 钩子来创建一个 selectedRowKeys 状态，用于存储选中行的 keys。然后，我们通过 onSelectChange 方法来更新 selectedRowKeys 状态，并将其传递给内层 Table 组件的 rowSelection 属性。

示例说明

示例一：基本嵌套

假设我们有以下数据：

const dataSource = [
  { id: 1, name: 'Parent 1', children: [{ id: 11, name: 'Child 1-1' }] },
  { id: 2, name: 'Parent 2', children: [{ id: 21, name: 'Child 2-1' }] },
];

通过使用上述代码创建的外层 Table 组件，我们可以得到以下结果：

ID	Name	Children
1	Parent 1	[Child 1-1]
2	Parent 2	[Child 2-1]

示例二：选择框联动

假设我们有以下数据：

const dataSource = [
  { id: 1, name: 'Parent 1', children: [{ id: 11, name: 'Child 1-1' }] },
  { id: 2, name: 'Parent 2', children: [{ id: 21, name: 'Child 2-1' }] },
];

通过使用上述代码创建的内层 Table 组件，我们可以得到以下结果：

Checkbox	ID	Name
[ ]	11	Child 1-1

在这个示例中，我们可以通过选择 Checkbox 来选中行，并通过联动操作来更新 selectedRowKeys 状态。