可以使用React中的嵌套组件来实现
form.list
里面嵌套table的效果。
首先，创建一个Table组件，用于显示表格内容。然后，在
Form.List组件中使用Table组件来渲染表格。
示例代码如下：
```jsx
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.use
Form();
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回调函数
获取表单数据。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
