場景
表單中,有的校驗元素不是標準的輸入框,如:
這種場景下,el-form-item上prop指定的值已經變化后,不會觸發重新校驗,導致選中之后,錯誤信息不消失
原因
跟蹤el的源碼,發現原因是,el自己的表單輸入元素在值改變后,會觸動去觸發上層的el-form-item組件的
‘el.form.change’事件,el-from-item接收到此事件后,會重新校驗
解決方法
對需要特殊輸入組件的綁定值,進行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