参考引用提及了“
FormList + Table”，但未给出具体的
使用方法、示例代码
和最佳实践等内容。
在实际开发中，
Form.List
和 Table
组合使用通常用于处理动态表单
和数据展示。以下是一个简单的
使用方法示例（以 React
和 Ant Design 为例）：
```jsx
import React from 'react';
import {
Form,
Input,
Button, Table } from 'antd';
const Demo = () => {
const [
form] =
Form.use
Form();
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
const onFinish = (values) => {
console.log('Received values of
form: ', values);
};
return (
<
Form form={
form} name="dynamic_
form_list" onFinish={onFinish}>
<
Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<
Form.Item
{...restField}
label="User"
key={key}
>
<
Form.Item
{...restField}
name={[name, 'name']}
fieldKey={[fieldKey, 'name']}
rules={[{ required: true, message: 'Missing name' }]}
>
<
Input placeholder="Name" />
</
Form.Item>
<
Form.Item
{...restField}
name={[name, 'age']}
fieldKey={[fieldKey, 'age']}
rules={[{ required: true, message: 'Missing age' }]}
>
<
Input placeholder="Age" />
</
Form.Item>
<
Button onClick={() => remove(name)}>Remove</
Button>
</
Form.Item>
))}
<
Form.Item>
<
Button type="dashed" onClick={() => add()} block>
Add User
</
Button>
</
Form.Item>
</>
)}
</
Form.List>
<
Form.Item>
<
Button type="primary" htmlType="submit">
Submit
</
Button>
</
Form.Item>
<Table
dataSource={
form.getFieldValue('users') || []}
columns={columns}
/>
</
Form>
);
};
export default Demo;
```
最佳实践方面，需要注意以下几点：
- 数据同步：确保
Form.List 中的数据
和 Table 展示的数据保持一致。
- 性能优化：对于大量数据，考虑分页、虚拟列表等优化策略。
- 错误处理：在表单提交
和数据处理过程中，做好错误处理
和提示。
扫一扫
607
到【灌水乐园】发言
