访问公司网站公司会知道吗,百度自媒体注册入口,网页制作与网站开发用的软件,深圳物联网开发antd form中数组套数组
form数组动态变化 动态赋值
需求如上#xff0c;同时添加多个产品#xff0c;同时每个产品可以增加多台设备#xff0c;根据设备增加相应编号#xff0c;所以存在数组套数组#xff0c;根据数组值动态变化 使用的知识点
form.list form中的数组…antd form中数组套数组
form数组动态变化 动态赋值
需求如上同时添加多个产品同时每个产品可以增加多台设备根据设备增加相应编号所以存在数组套数组根据数组值动态变化 使用的知识点
form.list form中的数组展示shouldUpdate 根据form值来动态变化数组是引用类型
// An highlighted block
div Formform{form}namebasiclabelCol{{flex: 90px,}}initialValues{{productList:[{bianHao:,wuMiao:,number:1,tType:you,files:{},list:[{sheBei:,guZi:,ziYou:,}],}]}}labelWrap{true}labelAlignleftonFinish{onFinish}onFinishFailed{onFinishFailed}autoCompleteoff{/* Card title基本信息 bordered{false}Row gutter{16}Col sm{24} md{12} lg{8} xxl{6}Form.Itemlabel最终用户nameusernamerules{[{required: true,message: 请输入,},]}Input //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Itemlabel商务助理nameuserLianrules{[{required: true,message: 请输入,},]}Input //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Itemlabel测试用途nameuserPhonerules{[{required: true,message: 请输入,},]}Input //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Itemlabel项目预计招标/采购时间nameuserShourules{[{required: true,message: 请输入,},]}Input //Form.Item/ColCol sm{24} Form.Itemlabel备注namebeiZhurules{[{required: true,message: 请输入,},]}TextArea //Form.Item/ColCol xl{24} sm{24}Form.Item label证明文件 Upload {...fileProps}Button typeprimary icon{UploadOutlined /}点击上传/Button/Upload/Form.Item/Col/Row /Card */}Card title基本信息 bordered{false}Form.List nameproductList {(fields, {add, remove}) ({fields.map((field,index) (Row gutter{16}{/* 用得时候只需要修改下面将需要重复展示的部分替换下面部分即可 注意 -----start*/ }Col sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label产品名称name{[field.name,bianHao]}rules{[{required: true,message: 请输入,},]}Input placeholder请输入 //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label物料编码name{[field.name,wuMiao]}rules{[{required: true,message: 请输入,},]}Input placeholder请输入 //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label数量name{[field.name,number]}rules{[{required: true,message: 请输入,},]}InputNumber min{1} style{{width:100%}}//Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label单位name{[field.name,tType]}rules{[{required: true,message: 请输入,},]}SelectSelect.Option valueyou台/Select.OptionSelect.Option valuezi块/Select.Option/Select/Form.Item/ColCol sm{24}Form.Item noStyle shouldUpdate{(pre,cur) {// 如果删除一条信息cur.productList[index]是空值所以需要判断if(cur.productList[index]pre.productList[index]){return pre.productList[index].number ! cur.productList[index].number}else{return false}}}{({getFieldsValue}) {{/* 繁琐的计算1.输入的数值比原来的数值大计算差值给原数组循环push2.手动在删除输入框为空的时候根据splice置空 因为是空所以计算出03.输入的数值比之前小优先从后面删除防止前面输入的被删除掉依旧是操作原数组 splice */}let number getFieldsValue().productList[index].number;let list getFieldsValue().productList[index].list;if(numberlist.length){let cha number - list.length;for(let i0; icha ; i){list.push({ sheBei:,guZi:,ziYou:,})}}else if(number){list.splice(0,list.length)}else if(numberlist.length){let cha list.length - number;list.splice(number,cha)} return Form.List name{[field.name,list]} {(tLists) ({tLists.map(tlist(Row gutter{16}Col sm{24} md{12} lg{8} xxl{6}Form.Item {...tlist}label设备序列号name{[tlist.name,sheBei]}rules{[{required: true,message: 请选择,},]}Input//Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...tlist}label固资编码name{[tlist.name,guZi]}rules{[{required: true,message: 请选择,},]}Input//Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...tlist}label自有编码name{[tlist.name,ziYou]}rules{[{required: true,message: 请选择,},]}Input//Form.Item/Col/Row))}/)}/Form.List}}/Form.Item/ColCol sm{24} Form.Itemlabel备注{...field}name{[field.name,beiZhu]}rules{[{required: true,message: 请输入,},]}TextArea //Form.Item/ColCol xl{24} sm{24}Form.Item label证明文件 {...field}name{[field.name,files]} Upload customRequest{(option option.onSuccess())}beforeUpload{(file, fileList) fileVerification(file, fileList)}Button typeprimary icon{UploadOutlined /}点击上传/Button/Upload/Form.Item/Col{ /* 用得时候只需要修改下面将需要重复展示的部分替换下面部分即可 -----end*/ }div styleNameitem_btn_wrapPlusCircleFilled styleNameadd_item_btn onClick{() add({bianHao:,wuMiao:,number:1,tType:you,beiZhu:,files:{},list:[{sheBei:,guZi:,ziYou:,}],})} /{fields.length1CloseCircleFilled styleNameremove_item_btn onClick{() remove(field.name)} /}/div/Row))}/)}/Form.List/CardCard{/* Row gutter{16}Col */}{/* Form.Item wrapperCol{{ offset: 8, span: 16 }} */}Form.Item styleNameright_layoutLink to/HW/HwBorrowListButton typedashed取消/Button/LinkButton style{{marginLeft:20px}} loading{saving} onClick{()onFinish(stage)}暂存/ButtonButton typeprimary style{{marginLeft:20px}} onClick{()onFinish(submit)}提交/Button{/* Button typeprimary htmlTypesubmit确认/Button */}/Form.Item{/* /Col/Row */}/Card/Form/div使用注意
Form.List 使用 {…field}或者{…tlist} 需要在name的前面否则出错中间有关于业务的逻辑输入数量的计算shouldUpdate 方法使用表单中值变化可以根据index来获取是第几个进而判断form数组的嵌套 运用两个form.list 嵌套重点关注内层的 name 怎么写进而进行内部的循环在对form 的数组进行赋值的操作时 紧记 数组是引用类型 用getFieldsValue 来获取需要操作的数组运用数组中的修改原数组的方法来操作即可及时修改form值 数组是引用类型 数组是引用类型 数组是引用类型
以上为代码和理解欢迎指正
