el-form-item校验问题

场景

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

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

原因

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

解决方法

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

在组件上为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>

监听值的变化

'applyModel.creditReportId'(){
      this.$refs.creditReportItem.$emit('el.form.change'); //非el的输入组件，值变化时不会触发el-from-item的重新校验，需要手动触发el.form.change事件
    }

注意： 这个值的rule中，trigger必须是change

2021-09.20更新
最近在上手Vue3,使用了element-plus,碰到一样的问题，发现上述办法已经不管用了，看了plus的源码，发现element-plus在内部自己维护了一套事件总线，使用$emit方法，不会触发el-form-item绑定的事件。思考了一下，发现其实有更简单的方法解决这个问题，而且element-ui和element-plus都适用。
还以上边的例子，取到form组件的引用，在watch方法中，调用form组件的validateField方法重新校验即可。。原来的方案反而麻烦。。。哈哈

'applyModel.creditReportId'(){
      this.$refs.form.validateField('creditReportId');
    }

el-form-item 校验问题

el-form-item校验问题

场景

原因

解决方法