欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element?select必填項(xiàng)驗(yàn)證回顯問(wèn)題的解決

 更新時(shí)間:2023年04月07日 09:12:47   作者:愛(ài)吃糖的GrumpyRabbit  
本文主要介紹了element?select必填項(xiàng)驗(yàn)證回顯問(wèn)題的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目場(chǎng)景:

今天在做頁(yè)面的時(shí)候,需要含有兩個(gè)form表單,表單的內(nèi)容以及驗(yàn)證信息的重置。

問(wè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的名稱(chēng)不一致

2、type類(lèi)型不一致

3、form表單以及打開(kāi)的Dialog對(duì)話(huà)框未區(qū)分開(kāi)

解決方案:

問(wèn)題一

<el-select>中v-model 綁定的數(shù)據(jù)要和上面的<el-form-item>中prop的名稱(chēng)一致。

<el-form-item label="XXX" prop="eqId" v-if="queryParams.testStatus === '0'">
   <el-select
     v-model="form.eqId"
     placeholder="請(qǐng)選擇XXXX"
     clearable
     style="width: 240px"
   >

問(wèn)題二

但是我的v-model和prop名稱(chēng)是一致的,我又搜了好半天,發(fā)現(xiàn)官網(wǎng)上說(shuō)Form表單校驗(yàn)內(nèi)置 async-validator,默認(rèn)是的字段類(lèi)型是string類(lèi)型(字符串型)。

如果他的選擇類(lèi)別是id的話(huà),需要成number才可以,于是我又試了試。

eqId: [
   { required: true, message: "XXX不能為空",trigger: "change",type:'number'},
],

但是給我提示,他不是number類(lèi)型,含淚繼續(xù)研究

問(wèn)題三 

我看了半天也沒(méi)研究出來(lái),最后還是一位大佬提醒我,我的頁(yè)面有兩個(gè)表單,驗(yàn)證需要區(qū)分開(kāi),我才突然想起來(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)閉后再打開(kāi),同一個(gè)表單下的頁(yè)面標(biāo)紅項(xiàng)依舊回顯。含淚繼續(xù)看,最后發(fā)現(xiàn)因?yàn)閹讉€(gè)頁(yè)面用的同一個(gè)dialog對(duì)話(huà)框,我只進(jìn)行了字段判斷打開(kāi)不同頁(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

終于糾結(jié)一天的問(wèn)題終于解決了,所以做項(xiàng)目一定要細(xì)心

到此這篇關(guān)于element select必填項(xiàng)驗(yàn)證回顯問(wèn)題的解決的文章就介紹到這了,更多相關(guān)element select驗(yàn)證回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue3中ref和reactive的用法和解析(推薦)

    vue3中ref和reactive的用法和解析(推薦)

    這篇文章主要介紹了vue3的ref和reactive的用法和解析,開(kāi)始部分講解了ref,reactive的使用實(shí)例,如何進(jìn)行類(lèi)型的標(biāo)注,配合ts這么使用,接著講解了兩者的區(qū)別,分別需要注意的點(diǎn),還有ref的頂層自動(dòng)解包,需要的朋友可以參考下
    2023-03-03
  • vue如何統(tǒng)一樣式(reset.css與border.css)

    vue如何統(tǒng)一樣式(reset.css與border.css)

    這篇文章主要介紹了vue如何統(tǒng)一樣式(reset.css與border.css),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue2為何能通過(guò)this訪(fǎng)問(wèn)到data與methods的屬性

    Vue2為何能通過(guò)this訪(fǎng)問(wèn)到data與methods的屬性

    這篇文章主要介紹了Vue2為何能通過(guò)this訪(fǎng)問(wèn)到data與methods的屬性,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-09-09
  • 詳解vue3中如何使用shaka-player

    詳解vue3中如何使用shaka-player

    這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue.js實(shí)現(xiàn)表格合并示例代碼

    vue.js實(shí)現(xiàn)表格合并示例代碼

    最近工作中遇到一個(gè)需求,是要做一個(gè)頁(yè)面放張大表格用來(lái)顯示數(shù)據(jù)項(xiàng),純粹為了view層操作方便,就用了vue做渲染。然而又被提出了一個(gè)需求,需要相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合并,這就醉了。沒(méi)辦法,只能想辦法解決,下面通過(guò)這篇文章來(lái)一起看看吧。
    2016-11-11
  • Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解

    Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解

    這篇文章主要介紹了Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 使用vue制作探探滑動(dòng)堆疊組件的實(shí)例代碼

    使用vue制作探探滑動(dòng)堆疊組件的實(shí)例代碼

    探探的堆疊滑動(dòng)組件起到了關(guān)鍵的作用,下面就來(lái)看看如何用vue寫(xiě)一個(gè)探探的堆疊組件,感興趣的朋友一起看看吧
    2018-03-03
  • vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

    vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

    本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫(xiě)前臺(tái)AJAX代碼實(shí)現(xiàn)用戶(hù)登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例

    vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例

    這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vuex處理用戶(hù)Token過(guò)期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊

    Vuex處理用戶(hù)Token過(guò)期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊

    這篇文章主要為大家介紹了Vuex處理用戶(hù)Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過(guò)期問(wèn)題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09

最新評(píng)論