### Ant Design 中 Form 组件嵌套 Table 的使用方法 在 Ant Design 中，`Form` 和 `Table` 是两个常用的组件。如果需要将两者结合起来，在 `Form` 中嵌套 `Table` 并实现动态交互功能，则可以通过以下方式完成。 #### 实现思路 1. **定义表单结构**：利用 `Form.List` 动态管理表单项的数量。 2. **嵌入表格组件**：将 `Table` 放置在一个循环渲染的区域中，使其能够随着表单项的变化而变化。 3. **数据同步**：通过 `onChange` 或其他事件监听器保持表单和表格之间的数据一致性。 以下是具体代码示例： ```jsx import React from 'react'; import { Card, Button, Input, Form, Table, Space } from 'antd'; const App = () => { const [form] = Form.useForm(); const columns = [ { title: 'Building', dataIndex: ['building'], render: (_, record) => ( <Form.Item name={['building']} initialValue={record.building} > <Input /> </Form.Item> ), }, { title: 'Version', dataIndex: ['version'], render: (_, record) => ( <Form.Item name={['version']} initialValue={record.version} > <Input /> </Form.Item> ), }, ]; return ( <Form form={form} layout="vertical"> {/* 动态添加/删除字段 */} <Form.List name="tableData"> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <Card key={field.key} title={`Row ${index + 1}`} style={{ marginBottom: 8 }} actions={[ <Button type="link" danger onClick={() => remove(index)}> Delete </Button>, ]} > {/* 渲染表格 */} <Table dataSource={[field.fieldValue || {}]} pagination={false} columns={columns} bordered /> </Card> ))} <Space> <Button type="dashed" onClick={() => add()}> Add Row </Button> </Space> </> )} </Form.List> {/* 提交按钮 */} <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default App; ``` --- #### 关键点解析 1. **动态管理表单项** 利用 `Form.List` 来动态增删表单项[^1]。每次调用 `add()` 方法会新增一条记录，调用 `remove(index)` 可移除指定索引处的记录。 2. **表格列配置** 定义 `columns` 数组时，每一列都可以是一个自定义渲染函数。在此函数内部，可以包裹一个 `Form.Item`，从而让表格中的单元格成为可编辑的输入框[^3]。 3. **初始值设置** 如果希望某些字段有默认值，可以在 `initialValues` 属性中提供对应的对象或数组。 4. **数据绑定** 将 `dataSource` 设置为当前表单项的内容，并通过 `name` 参数将其与父级表单关联起来，确保提交时能正确收集所有数据[^2]。 --- #### 注意事项 - 确保 `Table` 的 `dataSource` 数据源始终是有效的数组形式。 - 当前示例仅支持简单的字符串类型输入框；对于更复杂的场景（如日期选择器），需额外引入相应组件并调整 `render` 函数逻辑。 - 若涉及大量数据操作，建议优化性能，比如分页加载或者虚拟滚动技术。 ---