elementui自定义form组件校验,解决不触发校验事件

el-form 绑定model 并添加rules,el-form-item绑定prop属后,默认的el-input或者el-select 值变更时候可以通过表单校验

<el-form ref="form5" :model="form" :rules="rules" >
<el-form-item label="name" prop="name">
<el-input v-model="form.name" />
</el-form-item>

rules: {
name: [ { required: true , message: "必须填写", trigger: "blur"}]
}

自定义的组件比如图片上传之类不触发,
可以通过值变更时候触发上级El-Form-Item校验,吧value传进去即可,如下:把文件上传返回的url值传递到校验对象上去
handleUploadSuccess(res, file){
this.dispatch("ElFormItem","el.form.change",[res.url])
}

dispatch是 \element-ui\src\mixins\emitter.js的函数,这个可以递归找到最近的父节点方法,并触发事件;
如果需要this用法,可以如下方式引入

import emitter from 'element-ui/src/mixins/emitter';

mixins:[emitter],
props: {//和props同级
.....

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

推荐阅读更多精彩内容