遭遇到的问题有:
验证器的value值一直是undefined,由于我这里绑定的是数组,用了for循环,多方搜索之后,需要注意的点有:
①prop绑定的必须是数组里对象对应的属性
②动态绑定prop:
<el-form-item label="名称" :prop="`list.${index}.属性值`">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
③官网的model类型要求是一个object,于是将数组构建成对象,在html中绑定时写为<el-form ref="form" :model="{list:listData}" >
④试用validate方法时, form.value.validate((valid) => {
console.log(valid)
});(value是vue3的ref数据写法) 。其中valid时而有值输出时而为空,是因为你的验证器方法中分类情况没有callback().
改正方法:
const validName=(rule,value,callback)=>{
if(a){
callback()
}else{
callback(new Error("数据错误"))
}
}
formRules={
name:[
{required:true,message:"请输入名字",trigger:"blur"},
{validator:validName,trigger:"blur"},
],
"address.name":[ //顺便写一个验证表单属性支持这种写法
{required:true,message:"请输入地址",trigger:"blur"},
{validator:validName,trigger:"blur"},
]
}