el-form-item校驗(yàn)問(wèn)題

場(chǎng)景

表單中,有的校驗(yàn)元素不是標(biāo)準(zhǔn)的輸入框,如:



這種場(chǎng)景下,el-form-item上prop指定的值已經(jīng)變化后,不會(huì)觸發(fā)重新校驗(yàn),導(dǎo)致選中之后,錯(cuò)誤信息不消失

原因

跟蹤el的源碼,發(fā)現(xiàn)原因是,el自己的表單輸入元素在值改變后,會(huì)觸動(dòng)去觸發(fā)上層的el-form-item組件的
‘el.form.change’事件,el-from-item接收到此事件后,會(huì)重新校驗(yàn)

解決方法

對(duì)需要特殊輸入組件的綁定值,進(jìn)行watch,監(jiān)聽到變化后,用代碼去觸發(fā)上層el-form-item的‘el.form.change'事件

  1. 在組件上為el-from-item添加ref
<el-form-item label="選擇征信報(bào)告" 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;"
          >查看征信報(bào)告</el-button>
          <el-button
            v-show="!(applyModel.creditReportId==''||applyModel.creditReportId==null)"
            type="text"
            @click="checkCreditReport('apply')"
          >變更征信報(bào)告</el-button>
        </el-form-item>
  1. 監(jiān)聽值的變化
'applyModel.creditReportId'(){
      this.$refs.creditReportItem.$emit('el.form.change'); //非el的輸入組件,值變化時(shí)不會(huì)觸發(fā)el-from-item的重新校驗(yàn),需要手動(dòng)觸發(fā)el.form.change事件
    }

注意:
這個(gè)值的rule中,trigger必須是change

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,168評(píng)論 0 29
  • 前言: 在日常使用vue開發(fā)WEB項(xiàng)目中,經(jīng)常會(huì)有提交表單的需求。我們可以使用 iview 或者 element ...
    ZhengJX閱讀 13,155評(píng)論 0 6
  • VUE Vue :數(shù)據(jù)驅(qū)動(dòng)的M V Vm框架 m :model(后臺(tái)提供數(shù)據(jù)),v :view(頁(yè)面),vM(模板...
    wudongyu閱讀 5,523評(píng)論 0 11
  • # 傳智播客vue 學(xué)習(xí)## 1. 什么是 Vue.js* Vue 開發(fā)手機(jī) APP 需要借助于 Weex* Vu...
    再見(jiàn)天才閱讀 3,786評(píng)論 0 6
  • React中沒(méi)有類似Angular那樣的雙向數(shù)據(jù)綁定,在做一些表單復(fù)雜的后臺(tái)類頁(yè)面時(shí),監(jiān)聽、賦值、傳遞、校驗(yàn)時(shí)編碼...
    tedyuen777閱讀 9,974評(píng)論 1 23

友情鏈接更多精彩內(nèi)容