v-for 遍历的表单校验

根据官网的介绍，是在 el-form-item 中使用 :rules 属性，同时 prop 属性直接定位到具体循环元素。这个用法的前提是在循环外面包裹一个 el-form 元素，v-for 位于 el-form-item 中。

<template><el-form:model="dynamicValidateForm"ref="dynamicValidateForm"label-width="100px"class="demo-dynamic"><el-form-itemprop="email"label="邮箱":rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change'],},]"><el-input v-model="dynamicValidateForm.email"></el-input></el-form-item><template v-for="(domain, index) in dynamicValidateForm.domains"><el-form-item:label="domain.name + index":key="domain.key":prop="'domains.' + index + '.value'":rules="{required: true,message: domain.name + '不能为空',trigger: 'blur',}"><el-input v-model="domain.value"></el-input></el-form-item><el-form-itemv-for="(items, indexs) in domain.children":key="items.key":label="items.name + indexs":prop="'domains.' + index + '.children.' + indexs + '.value'":rules="{required: true,message: items.name + '不能为空',trigger: 'blur',}"><el-input v-model="domain.value"></el-input></el-form-item></template><el-form-item><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="addDomain">新增域名</el-button></el-form-item></el-form>
</template><script>
export default {data () {return {dynamicValidateForm: {domains: [{ name: '姓名', value: "", key: 1 },{ name: '家庭', value: "", key: 2, children: [{ name: '爸爸', value: "", key: 11 }, { name: '妈妈', value: "", key: 22 }] },]}}},methods: {addDomain () {},submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},},mounted () {}
}
</script><style>
</style>

位于循环中的 el-form-item ，为 el-form-item 设置 :rules 属性，同时设置它的 prop 属性需要遵循的规则为：

   prop=循环对象.下标.子属性

运行效果：