vue-treeSelect校驗

vue-treeSelect簡介

vue-treeSelect
這是一個樹形下拉選擇框

 

image

• 如果在form表單里(el-form)進行校驗會出現問題,rules里的tigger沒有相關的觸發校驗事件(我在網站上沒有找到，change不能觸發)

下面寫一下我的解決方法案例

• 先看代碼

 

代碼示例

<treeselect v-model='partake.dicPid' :multiple='false' :options='options1' @input='changeDicPid' @close='changeDicPid' v-show='dialogShow'></treeselect> 

• rules里正常寫

 

rule寫法

• @input和@close的含義

 

image

顧名思義input是輸入之后調用的方法，close是關閉下拉框調用的方法（因為選擇框有個輸入搜索功能，所以需要調用input方法）

• 在input和close調用的方法里用validateField重新校驗，就能在選擇或清空數據時進行校驗

 

image

changeDicPid(val){ this.$nextTick(()=>{ this.$refs.partakeRef.validateField('dicPid) }) } 

• 在保存和關閉的方法里正常調用表單校驗和清除校驗即可

  需要注意的是，在清除校驗時，會調用方法里的校驗，此時會提示校驗信息，所以可以判斷一下保存狀態

 

 

1人點贊

 

日記本

 

 

作者：凜冬已至_123
鏈接：https://www.jianshu.com/p/7b2c1194b358
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。