遭遇到的問題有:
驗(yàn)證器的value值一直是undefined哨啃,由于我這里綁定的是數(shù)組烧栋,用了for循環(huán),多方搜索之后拳球,需要注意的點(diǎn)有:
①prop綁定的必須是數(shù)組里對(duì)象對(duì)應(yīng)的屬性
②動(dòng)態(tài)綁定prop:
<el-form-item label="名稱" :prop="`list.${index}.屬性值`">
? ? <el-input v-model="sizeForm.name"></el-input>
? </el-form-item>
③官網(wǎng)的model類型要求是一個(gè)object审姓,于是將數(shù)組構(gòu)建成對(duì)象,在html中綁定時(shí)寫為<el-form ref="form" :model="{list:listData}" >
④試用validate方法時(shí)祝峻,?form.value.validate((valid) => {
? ? ? ? console.log(valid)
? ? ? ? });(value是vue3的ref數(shù)據(jù)寫法) 魔吐。其中valid時(shí)而有值輸出時(shí)而為空,是因?yàn)槟愕尿?yàn)證器方法中分類情況沒有callback().
改正方法:
const validName=(rule,value,callback)=>{?
if(a){
callback()
}else{
callback(new Error("數(shù)據(jù)錯(cuò)誤"))
}
}
formRules={
name:[
{required:true,message:"請(qǐng)輸入名字"莱找,trigger:"blur"},
{validator:validName,trigger:"blur"},
],
"address.name":[? ?//順便寫一個(gè)驗(yàn)證表單屬性支持這種寫法
{required:true,message:"請(qǐng)輸入地址"酬姆,trigger:"blur"},
{validator:validName,trigger:"blur"},
]
}