### Antd Form 组件实现深度定制的高交互性表单 Antd Form 组件提供了强大的灵活性，能够满足复杂场景下的表单需求。以下将详细介绍如何通过 Antd Form 实现动态配置、可编辑表单、表单联动、动态增删、动态校验以及按钮权限控制等功能。 #### 动态配置与可编辑表单 动态配置的核心在于使用 Schema 来定义表单结构，并结合渲染逻辑动态生成表单项。管理端可以通过可视化界面生成 Schema 数据，前端根据 Schema 渲染表单[^2]。 示例代码如下： ```javascript const schema = [ { type: 'input', name: 'username', label: '用户名' }, { type: 'select', name: 'gender', label: '性别', options: ['男', '女'] } ]; function renderFormItems(schema) { return schema.map(item => { if (item.type === 'input') { return ( <Form.Item key={item.name} label={item.label} name={item.name}> <Input /> </Form.Item> ); } else if (item.type === 'select') { return ( <Form.Item key={item.name} label={item.label} name={item.name}> <Select> {item.options.map(option => ( <Select.Option key={option} value={option}> {option} </Select.Option> ))} </Select> </Form.Item> ); } return null; }); } <Form>{renderFormItems(schema)}</Form> ``` #### 表单联动 表单联动可以通过监听字段值的变化来触发其他字段的更新。例如，当选择某个下拉框时，另一个字段的内容会随之变化。 ```javascript <Form> <Form.Item name="category" label="类别"> <Select onChange={(value) => setCategory(value)}> <Select.Option value="fruit">水果</Select.Option> <Select.Option value="vegetable">蔬菜</Select.Option> </Select> </Form.Item> <Form.Item name="product" label="产品"> <Select> {category === 'fruit' ? ( <> <Select.Option value="apple">苹果</Select.Option> <Select.Option value="banana">香蕉</Select.Option> </> ) : ( <> <Select.Option value="carrot">胡萝卜</Select.Option> <Select.Option value="potato">土豆</Select.Option> </> )} </Select> </Form.Item> </Form> ``` #### 动态增删 通过 `FieldArray` 可以轻松实现表单项的动态增删功能。以下是动态增删数组字段的示例： ```javascript <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline"> <Form.Item {...field} name={[field.name, 'name']} fieldKey={[field.fieldKey]}> <Input placeholder="姓名" /> </Form.Item> <Form.Item {...field} name={[field.name, 'age']} fieldKey={[field.fieldKey]}> <Input placeholder="年龄" /> </Form.Item> <MinusCircleOutlined onClick={() => remove(index)} /> </Space> ))} <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> 添加用户 </Button> </> )} </Form.List> ``` #### 动态校验 动态校验可以通过自定义验证规则实现。例如，根据某些条件动态调整字段的必填属性或格式要求。 ```javascript <Form.Item name="password" label="密码" rules={[ { required: true, message: '请输入密码!' }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || value.length >= 6) { return Promise.resolve(); } return Promise.reject(new Error('密码长度必须大于等于6位')); }, }), ]} > <Input.Password /> </Form.Item> ``` #### 按钮权限控制 按钮权限可以通过角色或状态判断动态显示或隐藏。以下是一个简单的示例： ```javascript <Form.Item> {hasPermission('submit') && ( <Button type="primary" htmlType="submit"> 提交 </Button> )} {hasPermission('reset') && ( <Button htmlType="button" onClick={onReset}> 重置 </Button> )} </Form.Item> ``` ### 总结 通过上述方法，可以充分利用 Antd Form 的灵活性实现复杂的表单需求。无论是动态配置、表单联动、动态增删、动态校验还是按钮权限控制，都可以通过合理的设计和编码实现。