Ant Design 动态增减form表单,第二三项根据第一项选中内容动态展示内容

本文主要是介绍Ant Design 动态增减form表单,第二三项根据第一项选中内容动态展示内容,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图:
在这里插入图片描述

选中第一项下拉框,第二第三项展示在这里插入图片描述
点击添加条件,第二条仍然只展示第一项select框
在这里插入图片描述

后端返回数据格式:

ruleList:[{name:'通话时长',key:'TALK_TIME',type:’INT‘,unitName:'秒',operaObj:[{name:'>=',value:'>='},{name:'<=',value:'<='}],restrValues:null},{name:'是否成功',key:'IS_SUCCESS',type:’BOOLEAN‘,unitName:'',operaObj:[{name:'=',value:'='}],restrValues:[{name:'是',value:true},{name:'否',value:false}]},{name:'通话状态',key:'CALL_STATUS',type:’MULTI_SELECT‘,unitName:'',operaObj:[{name:'=',value:'in'}],restrValues:[{name:'黑名单',value:’1‘},{name:'忙碌',value:’2‘}]}
]

根据选中的第一项,动态展示第二项第三项,以及第三项的类型是下拉框还是input,和单位unitName
代码:

import { ModalForm } from '@ant-design/pro-form';
import type { FormInstance } from 'antd';const manageFormRef = useRef<FormInstance>();
const [formData, setFormDate] = useState({ruleConditionDTOList: [null]
});<ModalFormtitle='添加'// 弹窗开关,跟目前主要所写逻辑无关,可以先不管,按照你自己的弹窗开关事件即可open={visible}width={650}formRef={manageFormRef}layout='vertical'autoComplete='off'labelCol={{ span: 12 }}onFieldsChange={() => setFormDate(manageFormRef.current?.getFieldValue())}// 默认初始化值initialValues={{isAddToBlacklist: false,ruleConditionDTOList: [{}]}}// 弹窗关闭onOpenChange={onClose}// 提交表单onFinish={handleOnFinish}
>
<Form.Item label='同时满足以下条件'><Form.List name="ruleConditionDTOList">{(fields, { add, remove }) => (<>{fields.map((field, index) => (<Space key={field.key} style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 8 }} align="baseline"><Form.Itemname={[field.name, 'key']}rules={[{ required: true, message: '请选择条件' }]}><Selectplaceholder="请选择条件"style={{ width: 200 }}onChange={(val) => handleChange(val, field, index)}>{ruleList && ruleList.map((item: any) => (<Select.Option value={item.key} fieldNames={item}>{item.name}</Select.Option>))}</Select></Form.Item>// 第一项有值,显示第二项{formData?.ruleConditionDTOList[index]?.key && 			<Form.Itemname={[field.name, 'operator']}rules={[{ required: true, message: '请选择' }]}><Select style={{ width: 100 }} placeholder="请选择">{ruleList && ruleList.find(v => formData.ruleConditionDTOList[index].key == v.key)?.operaObj.map((item: any) => (<Select.Option value={item.value}>{item.name}</Select.Option>))}</Select></Form.Item>}// 第一项有值,展示第三项,根据第一项的type,动态展示第三项是input或是select或是多选,我这里写了个函数{formData?.ruleConditionDTOList[index]?.key && getModel(formData?.ruleConditionDTOList[index]?.key, field, index)}// form表单组的长度大于1,显示删除按钮,否则隐藏{fields.length > 1 &&<DeleteOutlinedstyle={{ color: 'rgb(43, 132, 255)' }}className="dynamic-delete-button"onClick={() => remove(field.name)}/>}</Space>))}<Form.Item><Button style={{ width: '100px' }} type="primary" onClick={() => add()} block>添加条件</Button></Form.Item></>)}</Form.List>
</Form.Item>
</ModalForm>// 根据type类型动态展示第三项要展示的内容
const getModel = (key: any, field: any, index: Number) => {const item = ruleList.find((v: any) => v.key == key);const types = {INT: (field: any, item: any) => {return <Form.Itemname={[field.name, 'value']}rules={[{ required: true, message: '请输入' }]}><Input placeholder="请输入" style={{ width: 100 }} suffix={item.unitName} /></Form.Item>},// 多选下拉MULTI_SELECT: (field: any, item: any) => {return <Form.Itemname={[field.name, 'value']}rules={[{ required: true, message: '请选择' }]}><Select mode="multiple" style={{ width: 200 }}>{item.restrValues.map((v: any) => (<Select.Option value={v.value}>{v.name}</Select.Option>))}</Select></Form.Item>},BOOLEAN: (field: any, item: any) => {return <Form.Itemname={[field.name, 'value']}rules={[{ required: true, message: '请选择' }]}><Select style={{ width: 100 }}>{item.restrValues.map((v: any) => (<Select.Option value={v.value}>{v.name}</Select.Option>))}</Select></Form.Item>}}return types[item.type](field, item, index) ?? null;},// 选中第一项第二三项清空const handleChange = (val: any, field: any, index: any) => {const { ruleConditionDTOList } = formDataruleConditionDTOList[index] = Object.assign(ruleConditionDTOList[index] ?? {}, {key: val,operator: null,value: undefined})manageFormRef.current?.setFieldValue('ruleConditionDTOList', ruleConditionDTOList);setFormDate(manageFormRef.current?.getFieldValue());console.log(manageFormRef.current?.getFieldValue(), '置空');}

// 编辑时数据回显,后端返回的数据

data:{ruleConditionDTOList:[{name:'通话状态',key:'CALL_STATUS',type:'MULTI_SELECT',operator:'in',unitName:'',value:'1,2'},{name:'通话时长',key:'TALK_TIME',type:'INT',operator:'>=',unitName:'秒'}]
}

回显

useEffect(()=>{// 点击编辑,传的tagData单行rowif(tagData){// 由于我获取接口都是异步,赋值时需要setTimeout一下setTimeout(() => {const { ruleConditionDTOList: list } = tagDatalet arr:any = []list?.map((v:any) => {// 写个辅助函数,根据不同type,对value进行不同的操作const getValue = (type: any) => {const types = {INT: () => {return v.value},BOOLEAN: () => {return Boolean(v.value)},MULTI_SELECT: () => {const value = v?.value.split(',')return value}}return types[type]() ?? ''}const object = {name: v.name,key: v.key,operator: v.operator,value: getValue(v.type),type: v.type,unitName: v.unitName}arr.push(object)})manageFormRef.current?.setFieldsValue({ruleConditionDTOList: arr})setFormDate(manageFormRef.current?.getFieldsValue())}, 300);}
},[tagData])

提交数据部分就不写了,提交跟接口相对应的数据就行

这篇关于Ant Design 动态增减form表单,第二三项根据第一项选中内容动态展示内容的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1015678

相关文章

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象(BLOB)数据类型,用于存储大量的二进制数据,:本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十

Java使用正则提取字符串中的内容的详细步骤

《Java使用正则提取字符串中的内容的详细步骤》:本文主要介绍Java中使用正则表达式提取字符串内容的方法,通过Pattern和Matcher类实现,涵盖编译正则、查找匹配、分组捕获、数字与邮箱提... 目录1. 基础流程2. 关键方法说明3. 常见场景示例场景1:提取所有数字场景2:提取邮箱地址4. 高级

C#高效实现Word文档内容查找与替换的6种方法

《C#高效实现Word文档内容查找与替换的6种方法》在日常文档处理工作中,尤其是面对大型Word文档时,手动查找、替换文本往往既耗时又容易出错,本文整理了C#查找与替换Word内容的6种方法,大家可以... 目录环境准备方法一:查找文本并替换为新文本方法二:使用正则表达式查找并替换文本方法三:将文本替换为图

Linux从文件中提取特定内容的实用技巧分享

《Linux从文件中提取特定内容的实用技巧分享》在日常数据处理和配置文件管理中,我们经常需要从大型文件中提取特定内容,本文介绍的提取特定行技术正是这些高级操作的基础,以提取含有1的简单需求为例,我们可... 目录引言1、方法一:使用 grep 命令1.1 grep 命令基础1.2 命令详解1.3 高级用法2

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-