用的循环el-form, :model绑定循环的item,也就是数组中的单个对象,然后prop绑定参数,rules正常写, 然后提交的时候,因为el-form是循环的,所以用ref绑定的fForm是一个数组,要循环校验 fForm.value.forEach((item:any) =>{ item.validate((vali:boolean) =>{if(vali){// 校验通过} }) }) 这样就能对数据进...
在使用Element UI的el-form组件时,验证数组内的对象是一个常见的需求。为了实现这一点,你需要遵循一定的步骤来设置验证规则、遍历数组内的对象、对每个对象应用验证规则,并收集验证结果以进行相应的处理。以下是详细的解答:1. 确定el-form验证规则 首先,你需要在el-form的rules属性中定义验证规则。这些规则将用于数组...
1. 对象中包含一个数组,里面有多个对象 2. 对象中包含一个对象 总结来说: 其他的单纯的对象字段,依旧写在:rules="rules"里面,复杂结构的单独写在el-form-item标签里 template /** 对象中的数据对象字段验证 多余代码省略 & 只验证非空 **/ <div v-for="(item, index) in addForm.cargoList" :key="i...
一、数组基本校验。 数组校验的话,咱们得先明确一个概念,那就是每个元素都可能需要符合一定的规则。比如说你有一个数组,里面存的都是数字,那你就得校验每个数字是不是在某个合理的范围里。就像你在收集同学们的考试成绩,这个成绩肯定得是0到100之间呀。你可以在el - form里设置一个规则,针对这个数组的每个元素...
数组嵌套 <el-form><divv-for="version, i in formData.versions"><el-from-item:prop="`versions[${i}].version_name`":rules="formDataRules.version_name"></el-from-item></div></el-form> versions[${i}]要用序号取值的写法,不能直接使用version,el-from-item上的rules的指定也不能省略...
对象 // template<el-formref="form":model="dataForm":rules="dataFormRules"><el-form-itemlabel="file"prop="file.name":rules="dataRule.file"><el-upload...></el-upload></el-form-item></el-form>// scriptdataForm:{file:{name:'1',...}}dataRule:{file:{required:true,message:'请输...
当需要验证数组时,你可以使用自定义验证函数,并在rules中设置为数组。 下面是一个示例,演示如何校验数组的问题: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="数组" prop="array"> <el-input v-model="form.array"></el-input> </el-form-item>...
ruleForm: { // 动态循环项数组 formItemArr: [ { name: "", gender: "", }, ], }, 2. 点击添加表格的时候,就可以直接push对应项就行啦,即,这样: // 添加一个表格 addForm() { let itemObj = { name: "", gender: "", }; this.ruleForm.formItemArr.push(itemObj); }, 3. 重点来...
</el-form> ``` 2.在el-form中定义校验规则formRules,对数组属性进行校验。 ```js data() { return { formData: { //表单其他字段 }, formRules: { //其他字段的校验规则 dataList: [ { type: 'array', required: true, message: '请至少添加一条数据', trigger: 'blur' }, //其他校验规则 ...
二、表单数据为数组,数组循环中的每个字段需要校验 在上述使用方式的基础上,需要额外注意: ①prop 在循环中需要对应到 formdata 中数组的某一项具体值,可以利用index 等变量进行锁定,再取到具体的key ②v-model 结合循环正常使用 ③el-form-item的rules需要手动指定 ...