iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)
有個(gè)需求，要求對(duì)輸入框進(jìn)行 啟用/禁用 的切換，同時(shí)在禁用時(shí)要清除輸入框的校驗(yàn)狀態(tài)（那個(gè)紅框）。
方法一：修改 formItem 字段屬性
在iview 的官方api 中并沒(méi)找到清除校驗(yàn)狀態(tài)的方法，看了下源碼，用一個(gè)粗糙的方法解決了。
源文件 form-item.vue 中的 resetField方法 是通過(guò)修改這兩個(gè)屬性的值清空狀態(tài)和提示的
其實(shí)就是把 formItem 的兩個(gè)屬性值進(jìn)行了修改，
v.validateDisabled 是否校驗(yàn)
v.validateState 展示狀態(tài)（校驗(yàn)錯(cuò)誤時(shí)此處值為 'error'）
v.validateMessage 錯(cuò)誤提示文字
修改狀態(tài)的同時(shí)需要把校驗(yàn)規(guī)則清掉，否則在提交時(shí)還會(huì)再次觸發(fā)校驗(yàn)方法。
方法二：控制 form 渲染
后來(lái)在置空校驗(yàn)規(guī)則的時(shí)候，初始如果沒(méi)有規(guī)則的話，則不會(huì)校驗(yàn)（除非去點(diǎn)擊提交按鈕），然后想到用 v-if 控制 form 的渲染時(shí)機(jī)，當(dāng)校驗(yàn)規(guī)則發(fā)生變化的時(shí)候重新渲染，這樣就能保證規(guī)則和 DOM 是同步的，也不用費(fèi)力去修改屬性
這時(shí)就用到了 Promise（真是個(gè)好東西），超簡(jiǎn)單的做了個(gè) callback，每次切換控制按鈕都進(jìn)行這么一套渲染（主要還是代碼中調(diào)用這個(gè)方法的地方太多，懶的去改），也是粗暴的把這個(gè)需求對(duì)付上了。
后續(xù)研究一下，在原基礎(chǔ)上增加一個(gè)方法專門(mén)用來(lái)清除狀態(tài) ^_^
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue中使用公共過(guò)濾器filter的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue 匿名、具名和作用域插槽的使用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的方法實(shí)例
一開(kāi)始我還以為vue的路由只能用在工程化的項(xiàng)目里面,其實(shí)不然,下面這篇文章主要給大家介紹了關(guān)于前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過(guò)配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3框架使用報(bào)錯(cuò)以及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析
這篇文章主要介紹了vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12