el-form-item 校驗問題

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'事件

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>
複製代碼

2. 監聽值的變化

'applyModel.creditReportId'(){
      this.$refs.creditReportItem.$emit('el.form.change'); //非el的輸入組件，值變化時不會觸發el-from-item的從新校驗，須要手動觸發el.form.change事件
    }
複製代碼

注意： 這個值的rule中，trigger必須是change