2021-06-22 element Plus之表单验证绑定数组踩过的坑

遭遇到的问题有:

验证器的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"},

]

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容