REACT antd 嵌套table组件 并修改数据、获取数据

可以使用 Ant Design 的 Table 组件的嵌套表格功能来实现嵌套表格，同时通过修改数据和获取数据来实现对嵌套表格的操作。

首先，你需要定义一个 columns 数组，其中包含了嵌套表格需要展示的列信息。在 columns 中，需要使用 render 方法来渲染嵌套表格。render 方法中需要返回一个嵌套表格组件，例如：

{
  title: '子表格',
  dataIndex: 'subTableData',
  render: (subTableData) => {
    const columns = [
      { title: '姓名', dataIndex: 'name' },
      { title: '年龄', dataIndex: 'age' },
      { title: '性别', dataIndex: 'gender' },
    ];

    return (
      <Table
        columns={columns}
        dataSource={subTableData}
      />
    );
  },
},

在上面的代码中，我们定义了一个名为 subTableData 的数据字段，用来存储嵌套表格中需要展示的数据。在 render 方法中，我们使用 Table 组件来渲染嵌套表格，并将 columns 和 subTableData 作为参数传入。

接下来，你需要实现修改数据的逻辑。在 Ant Design 的 Table 组件中，修改数据通常是通过 onRow 和 editable 等属性来实现的。onRow 属性可以用来监听表格行的点击事件，并将当前行的数据传递给一个回调函数。editable 属性可以用来将表格单元格设置为可编辑状态。例如：

<Table
  dataSource={dataSource}
  columns={columns}
  onRow={(record) => {
    return {
      onClick: () => {
        console.log(record); // 当前行的数据
      },
    };
  }}
  components={{
    body: {
      cell: EditableCell,
    },
  }}
  bordered
  pagination={false}
/>

在上面的代码中，我们使用 onRow 属性来监听表格行的点击事件，并将当前行的数据传递给一个回调函数。在回调函数中，我们可以使用 console.log 方法来输出当前行的数据。同时，我们使用 components 属性来将表格单元格设置为可编辑状态。

最后，你需要实现获取数据的逻辑。在 Ant Design 的 Table 组件中，获取数据通常是通过 dataSource 属性来实现的。dataSource 属性是一个数组，用来存储表格需要展示的所有数据。你可以将 dataSource 中的数据传递给后端，或者在前端对其进行处理。例如：

const handleSave = (row) => {
  const newData = [...dataSource];
  const index = newData.findIndex((item) => row.key === item.key);
  const item = newData[index];
  newData.splice(index, 1, { ...item, ...row });

  setDataSource(newData);

  // 将数据传递给后端
  // saveData(newData);
};

在上面的代码中，我们定义了一个名为 handleSave 的函数，用来处理表格数据的修改。在函数中，我们使用 setDataSource 方法来更新 dataSource 数组的值，并将修改后的数据传递给后端。如果你不需要将数据传递给后端，可以直接在前端对其进行处理。