当前位置: 首页 > news >正文

ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项

ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。代码中地市联动获取区县数据: 

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" form={form} initialValues={{ list: [{}] }} ><Form.List name="list">{(fields, { add, remove }) => (<>{fields.map(({ key, name, ...restField }, index) => (<Rowkey={key}gutter={8}><Col span={3}><Form.Item{...restField}name={[name, 'area']}rules={[{required: true,message: '请选择地市',},]}><SelectlabelInValueoptions={areaList}placeholder="请选择地市"/></Form.Item></Col><Col span={4}><Form.ItemnoStyle={true}shouldUpdate={true} // 当 shouldUpdate 为 true 时,Form 的任意变化都会使该 Form.Item 重新渲染>{() => (<Form.Item{...restField}name={[name, 'city']}rules={[{required: true,message: '请选择区县',},]}><SelectlabelInValueoptions={ // 这里是获取city数据的关键cityObj?.[ // cityObj是某个地市下city数据的集合 数据类型是对象{地市ID:[]}form.getFieldValue(['list',name,'area'])?.value // 由于Select使用了labelInValue属性,所以这里取value即地市ID] || []}placeholder="请选择区县"/></Form.Item>)}</Form.Item></Col><Col span={1} style={{ textAlign: 'center' }}><MinusCircleOutlined onClick={() => remove(name)} /></Col></Row>))}<Form.Item ><Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>新增</Button></Form.Item></>)}</Form.List><Form.Item style={{ textAlign: 'center' }}><Button type="primary" htmlType="submit">提交</Button></Form.Item>
</Form>

相关文章:

  • 你使用过哪些性能分析工具来优化Java程序?
  • spring 事务隔离级别
  • [手游] 口袋妖怪肉鸽宝可梦肉鸽
  • 烧写uboot、linux镜像、根文件系统到开发板
  • 数据挖掘--引论
  • 基于zyyo主页与無名の主页合并二改,一款适合新手的个人主页
  • c++ 简单的日志类 CCLog
  • SpringMVC:拦截器(Interceptor)
  • Python | 排队取奶茶
  • 老旧机子装LINUX——xubuntu
  • 自制植物大战僵尸:HTML5与JavaScript实现的简单游戏
  • JavaScript入门宝典:核心知识全攻略(下)
  • RabbitMQ怎么保证可靠性
  • [C#]使用OpenCvSharp图像滤波中值滤波均值滤波高通滤波双边滤波锐化滤波自定义滤波
  • 国产操作系统上Vim的详解03--使用Vundle插件管理器来安装和使用插件 _ 统信 _ 麒麟 _ 中科方德
  • C++类中的特殊成员函数
  • ES6之路之模块详解
  • Git同步原始仓库到Fork仓库中
  • PHP 的 SAPI 是个什么东西
  • vue 配置sass、scss全局变量
  • Vue--数据传输
  • windows下如何用phpstorm同步测试服务器
  • 工程优化暨babel升级小记
  • 技术:超级实用的电脑小技巧
  • 坑!为什么View.startAnimation不起作用?
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 微信小程序实战练习(仿五洲到家微信版)
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 由插件封装引出的一丢丢思考
  • 大数据全解:定义、价值及挑战
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​queue --- 一个同步的队列类​
  • # 数仓建模:如何构建主题宽表模型?
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • $L^p$ 调和函数恒为零
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (翻译)Entity Framework技巧系列之七 - Tip 26 – 28
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (六)vue-router+UI组件库
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .Net Core 微服务之Consul(三)-KV存储分布式锁
  • .NET开发人员必知的八个网站
  • .NET微信公众号开发-2.0创建自定义菜单
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • @synthesize和@dynamic分别有什么作用?
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [20150629]简单的加密连接.txt
  • [BSGS算法]纯水斐波那契数列
  • [C++][opencv]基于opencv实现photoshop算法色阶调整
  • [Cloud Networking] Layer Protocol (continue)
  • [CTSC2014]企鹅QQ