您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“element select必填項(xiàng)驗(yàn)證回顯問題怎么解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“element select必填項(xiàng)驗(yàn)證回顯問題怎么解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
今天在做頁(yè)面的時(shí)候,需要含有兩個(gè)form表單,表單的內(nèi)容以及驗(yàn)證信息的重置。
因?yàn)閮蓚€(gè)表單綁定的字段有些重復(fù),并同時(shí)要設(shè)置必選項(xiàng),導(dǎo)致當(dāng)一個(gè)表單標(biāo)紅,關(guān)閉后還是回顯紅色,并且另一個(gè)表單也受到了影響。然后排查了好久才解決。
1、v-model 綁定的數(shù)據(jù)要和上面的prop的名稱不一致
2、type類型不一致
3、form表單以及打開的Dialog對(duì)話框未區(qū)分開
<el-select>中v-model 綁定的數(shù)據(jù)要和上面的<el-form-item>中prop的名稱一致。
<el-form-item label="XXX" prop="eqId" v-if="queryParams.testStatus === '0'"> <el-select v-model="form.eqId" placeholder="請(qǐng)選擇XXXX" clearable >
但是我的v-model和prop名稱是一致的,我又搜了好半天,發(fā)現(xiàn)官網(wǎng)上說(shuō)Form表單校驗(yàn)內(nèi)置 async-validator,默認(rèn)是的字段類型是string類型(字符串型)。
如果他的選擇類別是id的話,需要成number才可以,于是我又試了試。
eqId: [ { required: true, message: "XXX不能為空",trigger: "change",type:'number'}, ],
但是給我提示,他不是number類型,含淚繼續(xù)研究
我看了半天也沒研究出來(lái),最后還是一位大佬提醒我,我的頁(yè)面有兩個(gè)表單,驗(yàn)證需要區(qū)分開,我才突然想起來(lái),趕緊在resetFrom中做了區(qū)分。
if (this.item.Number === '1' || this.item.Number=== '2'){ this.resetForm("form"); }else if(this.item.Number=== '3'){ this.resetForm("irform"); }
然后發(fā)現(xiàn)他們兩個(gè)form不會(huì)互相影響了,但是測(cè)試的時(shí)候發(fā)現(xiàn)頁(yè)面關(guān)閉后再打開,同一個(gè)表單下的頁(yè)面標(biāo)紅項(xiàng)依舊回顯。含淚繼續(xù)看,最后發(fā)現(xiàn)因?yàn)閹讉€(gè)頁(yè)面用的同一個(gè)dialog對(duì)話框,我只進(jìn)行了字段判斷打開不同頁(yè)面的判斷,但是未進(jìn)行dialog中:visible.sync屬性進(jìn)行判斷。
<el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false" > <el-form ref="form" :model="form" :rules="rules" label-width="110px" v-if="(item.Number === '1' || item.Number === '2') && open"> ... 不重要的一些代碼 ... </el-form> <el-form ref="irform" :model="irform" :rules="rules" label-width="115px" v-if="item.Number === '3' && open "> </el-form> </el-dialog>
我設(shè)置的:visible.sync=open,所以&&open
讀到這里,這篇“element select必填項(xiàng)驗(yàn)證回顯問題怎么解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。