表单中如果增加列表子项集合,例如下图的数据结构,需要对子项的字段进行验证的时候。
formData:{
name:'',
list:[ // 集合子项
{ name:'',id:''} // 需要验证里面的字段
]
},
使用 :prop=”`domains.${index}.value`”
方法1:行内写规则
<template>
<el-form ref="form" :model="formData" label-width="100px">
<el-form-item
v-for="(domain, index) in form.list"
:key="index"
label="姓名"
:prop="`domains.${index}.value`"
:rules="[
{ required: true, message: 'name is required' },
{ type: 'string', message: 'name must be a string' },
{ validator: checkName, trigger: ['blur'] }
]"
>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</template>
方法2:引用方式
<template>
<el-form ref="form" :model="formData" :rules="rule" label-width="100px">
<el-form-item
v-for="(domain, index) in form.list"
:key="index"
label="姓名"
:prop="`list.${index}.value`"
:rules="rule.list.name"
>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</template>
// 验证规则写法
rules: {
name: [{ required: true, message: '协议必填', trigger: 'blur' }],
// 子项验证规则
list: {
name: [{ required: true, message: '协议必填', trigger: 'blur' }]
}
}