基础建设期刊在哪个网站可以查,广告网上接单,南京做网站的公司,泉州网站建设公司首选文章目录 前言定义表单格式表单渲染和验证扩展 前言
在做复杂的动态表单#xff0c;实现业务动态变动#xff0c;比如有一条需要动态添加的el-form-item中包含了多个输入框#xff0c;并实现表单验证#xff0c;但在element-ui组件库中给出的表单校验中没有这样的格式实现业务动态变动比如有一条需要动态添加的el-form-item中包含了多个输入框并实现表单验证但在element-ui组件库中给出的表单校验中没有这样的格式解决方法可参考文章Element-UI 实现动态增加多个输入框并校验。
如果现在不想要固定格式的动态增加表单且增加表单的类型不同比如按钮开关、文本输入框、数字输入框想要自由增加不同类型的表单并验证可以参考本文。 定义表单格式
form 表单格式如下
data() {return {form: { content: [] }}
}
新建表单方法下使 form.content 加入新的数组并在新加入的数组下定义输入框的类型或内容
[CRUD.HOOK.beforeToAdd](crud, form) {form.content.push([])form.content[0].push({type: 1,name: 开关,val: true,key: enabled})form.content[0].push({type: 2,name: test2,val: test2,key: test2})form.content[0].push({type: 3,name: test3,val: 100,key: test3})
}
表单渲染和验证
el-form refform :inlinetrue :modelform :rulesrules sizesmall label-width120pxel-rowel-col :span24 v-for(arr,index) in form.content :keyindex :labelindexel-form-item v-for(item,arrIndex) in arr :keyarrIndex :labelitem.name :propcontent[${index}][${arrIndex}].val :rules[{ required: true, message: 必填项, trigger: change }]span v-ifitem.sceneType 1el-radio-group v-modelitem.val stylewidth: 220pxel-radio :labeltrue开/el-radioel-radio :labelfalse关/el-radio/el-radio-group/spanspan v-ifitem.sceneType 2el-input v-modelitem.val stylewidth: 220px //spanspan v-ifitem.sceneType 3el-input-number v-modelitem.val stylewidth: 220px //span/el-form-item/el-col/el-row
/el-form
可以看到使用了双重 v-for 循环
第一重v-for用于遍历数组第二重v-for用于解析数组下的多个不同类型的输入框
重点
双重v-for表单验证的 prop 格式如下
:propcontent[${index}][${arrIndex}].val效果如图 删掉内容可以看到需要验证 填入内容必填项 消失 扩展
往表单增加第二个数组并在第二个数组增加4个输入框
form.content.push([])
form.content[1].push({type: 1,name: 开关,val: false,key: enabled
})
form.content[1].push({type: 2,name: test2,val: 一碗情深,key: test2
})
form.content[1].push({type: 2,name: 测试,val: ,key: test
})
form.content[1].push({type: 3,name: test3,val: 50,key: test3
})
效果如图 进阶Vue 双重v-for渲染表单再复制表单编辑之深拷贝
