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,074評論 0 29
  • 前言: 在日常使用vue開發WEB項目中,經常會有提交表單的需求。我們可以使用 iview 或者 element ...
    ZhengJX閱讀 13,009評論 0 6
  • VUE Vue :數據驅動的M V Vm框架 m :model(后臺提供數據),v :view(頁面),vM(模板...
    wudongyu閱讀 5,423評論 0 11
  • # 傳智播客vue 學習## 1. 什么是 Vue.js* Vue 開發手機 APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,599評論 0 6
  • React中沒有類似Angular那樣的雙向數據綁定,在做一些表單復雜的后臺類頁面時,監聽、賦值、傳遞、校驗時編碼...
    tedyuen777閱讀 9,896評論 1 23