element?select必填項驗證回顯問題的解決

更新時間：2023年04月07日 09:12:47 作者：愛吃糖的GrumpyRabbit

本文主要介紹了element?select必填項驗證回顯問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

項目場景：

今天在做頁面的時候，需要含有兩個form表單，表單的內容以及驗證信息的重置。

問題描述

因為兩個表單綁定的字段有些重復，并同時要設置必選項，導致當一個表單標紅，關閉后還是回顯紅色，并且另一個表單也受到了影響。然后排查了好久才解決。

原因分析：

1、v-model 綁定的數據要和上面的prop的名稱不一致

2、type類型不一致

3、form表單以及打開的Dialog對話框未區(qū)分開

解決方案：

問題一

<el-select>中v-model 綁定的數據要和上面的<el-form-item>中prop的名稱一致。

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

問題二

但是我的v-model和prop名稱是一致的，我又搜了好半天，發(fā)現官網上說Form表單校驗內置 async-validator，默認是的字段類型是string類型（字符串型）。

如果他的選擇類別是id的話，需要成number才可以，于是我又試了試。

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

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

問題三

我看了半天也沒研究出來，最后還是一位大佬提醒我，我的頁面有兩個表單，驗證需要區(qū)分開，我才突然想起來，趕緊在resetFrom中做了區(qū)分。

if (this.item.Number === '1' || this.item.Number=== '2'){
    this.resetForm("form");
}else if(this.item.Number=== '3'){
    this.resetForm("irform");
}

然后發(fā)現他們兩個form不會互相影響了，但是測試的時候發(fā)現頁面關閉后再打開，同一個表單下的頁面標紅項依舊回顯。含淚繼續(xù)看，最后發(fā)現因為幾個頁面用的同一個dialog對話框，我只進行了字段判斷打開不同頁面的判斷，但是未進行dialog中:visible.sync屬性進行判斷。

<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>

我設置的:visible.sync=open，所以&&open

終于糾結一天的問題終于解決了，所以做項目一定要細心

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

您可能感興趣的文章: