v-for中el-form表单项动态校验代码示例

.box{width:100%;高度：100%；框大小：边框框；填充：24px；.formform{宽度：360px；.formformItemClass{padding-top:24px;r:2px虚线#ccc;底部边距：18px；}}}问题描述在项目开发中，我们经常会遇到保存表单的功能。在保存表单之前，我们经常需要验证表单的必填项目。验证通过后，发送保存表单数据的请求。但是，如果这个表单是动态的，那就是：可以添加相同的表单。比如这个表单有一个输入框和一个下拉框需要校验。点击添加表单按钮，新增一个相同的表单，新表单对应的输入框和下拉框也需要校验。本文记录相应的代码编写思路。先看效果图：效果图代码ideaform的主要数据应该写成objects的形式：model="ruleForm"但是由于是动态的，所以必须循环，所以，可以这样写像这样：ruleForm:{//动态循环item数组formItemAr:[{name:"",gender:"",},],}，点击添加表单时，可以直接push对应的item，即,就像这样://添加一个表单addForm(){letitemObj={name:"",gender:"",};this.ruleForm.formItemAr.push(itemObj);它也会变得动态。拼接索引，就??变成了根据索引找到对应的勾选项，即：prop="'formItemArr.'+index+'.name'",在这种情况下，它变成：prop="formItemAr.0.name",prop="formItemAr.1.name",prop="formItemAr.2.name"...在这个方式，每个项目中的每个项目都可以照顾一个绑定值，验证不会错过内联编写的验证规则来触发验证函数this.$refs["ruleForm"].validate((val)=>{})......完整代码演示，复制粘贴即可.box{width:100%;高度：100%；框大小：边框框；填充：24px；.formform{宽度：360px；.formformItemClass{padding-top:24px;r:2px虚线#ccc;底部边距：18px；}}}好记性不如烂笔头，记录一下吧^_^