antd pro 表单联动方法

最新推荐文章于 2025-03-10 09:41:48 发布

_必应

最新推荐文章于 2025-03-10 09:41:48 发布

阅读量3.2k

点赞数

分类专栏： antd 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/jbguo/article/details/125599531

版权

antd 专栏收录该内容

6 篇文章

订阅专栏

antd ProFormSelect表单联动官方文档比较难找，我简单整理一下，以官网为准

使用组件ProFormDependency

<ProForm.Group>
   <ProFormSelect colProps={{ span: 11 }}
     options={[
       {
         value: 'stock',
         label: '股票',
       },
       {
         value: 'bond',
         label: '债券',
       },
     ]}
     name="codeType"
     label="标的类型"
   // rules={[{ required: true }]}
   />
   <ProFormDependency name={['codeType']}>
     {({ codeType }) => {
       return (
         <ProFormText
           colProps={{ span: 11, offset: 1 }}
           style={{ marginLeft: 20 }}
           name="trade"
           label="所属行业"
           placeholder="股票标的对应行业自动生成"
           // dependencies={['codeType']}
           disabled={codeType === "stock"}
         />
       );
     }}
   </ProFormDependency>
 </ProForm.Group>

使用dependencies

参考自： proformSelect dependencies

<ProForm.Group>
  <ProFormSelect
     name="parentName"
     label="一级类别"
     width="sm"
     fieldProps={{
       maxTagCount: 1,
     }}
     // dependencies 的内容会注入 request 中, 关联name表单
     dependencies={['name']}
     request={async (params) => {
       const newParam = formRef?.current?.getFieldValue('name')
         ? [{ label: params.name, value: params.name }]
         : [];
       const allParams = newParam.concat(category);
       return allParams;
     }}
     placeholder="请选择一级类别，右侧可添加新类别"
     rules={[{ required: true, message: '请选择一级类别!' }]}
   />
   <ProFormText width="sm" name="name" placeholder="请输入新一级类别" />
 </ProForm.Group>