form.list里面嵌套table---react

可以使用React中的嵌套组件来实现form.list里面嵌套table的效果。

首先，创建一个Table组件，用于显示表格内容。然后，在Form.List组件中使用Table组件来渲染表格。

示例代码如下：

import React from 'react';
import { Form, Input, Button, Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const TableComponent = ({ value = [], onChange }) => {
  const handleTableChange = (pagination, filters, sorter) => {
    onChange(pagination.current);
  };

  return (
    <Table
      columns={columns}
      dataSource={value}
      onChange={handleTableChange}
      pagination={{ pageSize: 5 }}
    />
  );
};

const FormWithTable = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form form={form} name="dynamic_form_nest_item" onFinish={onFinish}>
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Form.Item
                {...field}
                label="User"
                name={[field.name, 'info']}
                fieldKey={[field.fieldKey, 'info']}
                rules={[{ required: true, message: 'Missing user name' }]}
              >
                <Input placeholder="User name" />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add user
              </Button>
            </Form.Item>
            <Form.Item>
              <TableComponent
                value={fields.map((field) => field.key)}
                onChange={(page) => console.log(page)}
              />
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormWithTable;

在上面的示例代码中，我们首先定义了一个Table组件，用于渲染表格内容。然后，在Form.List组件中使用Table组件来渲染表格。

在Table组件中，我们使用了value和onChange属性来与Form.List组件进行交互。value属性表示当前表格中的数据，onChange属性表示表格页码发生变化时的回调函数。

在Form.List组件中，我们使用了fields.map方法来渲染表单项和Table组件。在渲染表单项时，我们需要指定name和fieldKey属性，用于与Table组件进行交互。在渲染Table组件时，我们将fields.map方法返回的key数组作为value属性传递给Table组件，用于渲染当前页的数据。同时，我们将一个回调函数传递给onChange属性，用于处理分页变化的逻辑。

最后，我们将Form组件包裹在FormWithTable组件中，并调用Form.List组件来渲染表单项和Table组件。在表单提交时，我们可以通过onFinish回调函数获取表单数据。