el-form-item校验问题

场景

表单中,有的校验元素不是标准的输入框,如:



这种场景下,el-form-item上prop指定的值已经变化后,不会触发重新校验,导致选中之后,错误信息不消失

原因

跟踪el的源码,发现原因是,el自己的表单输入元素在值改变后,会触动去触发上层的el-form-item组件的
‘el.form.change’事件,el-from-item接收到此事件后,会重新校验

解决方法

对需要特殊输入组件的绑定值,进行watch,监听到变化后,用代码去触发上层el-form-item的‘el.form.change'事件

  1. 在组件上为el-from-item添加ref
<el-form-item label="选择征信报告" prop="creditReportId" v-if="!infoDisabled" ref="creditReportItem">
          <el-button
            v-show="applyModel.creditReportId==''||applyModel.creditReportId==null"
            type="text"
            @click="checkCreditReport('apply')"
          >选择</el-button>
          <el-button
            v-show="!(applyModel.creditReportId==''||applyModel.creditReportId==null)"
            type="text"
            @click="previewReportFlag=true;"
          >查看征信报告</el-button>
          <el-button
            v-show="!(applyModel.creditReportId==''||applyModel.creditReportId==null)"
            type="text"
            @click="checkCreditReport('apply')"
          >变更征信报告</el-button>
        </el-form-item>
  1. 监听值的变化
'applyModel.creditReportId'(){
      this.$refs.creditReportItem.$emit('el.form.change'); //非el的输入组件,值变化时不会触发el-from-item的重新校验,需要手动触发el.form.change事件
    }

注意:
这个值的rule中,trigger必须是change

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

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • 前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求。我们可以使用 iview 或者 element ...
    ZhengJX阅读 13,003评论 0 6
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,418评论 0 11
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,590评论 0 6
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 9,889评论 1 23