解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題
問題描述：
在使用Element-ui組件做項(xiàng)目開發(fā)時(shí)候有可能會(huì)使用下拉框組件,如果下拉框組件的option選項(xiàng)是使用v-if指令遍歷的,
這樣也沒有問題,但是如果加上multiple屬性,也就是可以多選 就會(huì)出現(xiàn)下拉框驗(yàn)證時(shí)失效問題.
問題現(xiàn)象：
如圖所示,明明已經(jīng)選擇了選項(xiàng),可是驗(yàn)證還是為空,因此不能提交請(qǐng)求
解決思路：
如果說找遍組件里的方法都無法獲得我們適合使用的,那就要?jiǎng)佑迷竟α?/p>
console.log一下v-model在此組件上綁定的屬性,你發(fā)現(xiàn)你綁定的字符串(一般情況下都是String,這里就拿字符串舉例說明)打印出來卻是Array
所以如果驗(yàn)證必填的話我們就直接判斷v-model在此組件上綁定的屬性的length是否大于0就好了;其他要求的話可以留言
思路驗(yàn)證：
我有試驗(yàn)過在rules增加type: ‘test',表面上看起來是可以的,但是打開控制臺(tái),它已經(jīng)報(bào)錯(cuò)了: Unkown rule type text,如下圖:
竟然沒有type=text屬性! 好吧~只能繼續(xù)
既然多選設(shè)置之后輸出的是數(shù)組, 那就跟chexkbox一樣 ,我可以把v-model屬性改成[],然后rules里面的type: 'array'實(shí)驗(yàn)一下,結(jié)果不報(bào)錯(cuò),但是驗(yàn)證也不生效
可見Element還是有坑踩哦,我的項(xiàng)目緊急就先原生解決了,哪天找到組件解決辦法我會(huì)及時(shí)更新的,當(dāng)然如果誰知道解決辦法也請(qǐng)分享給我哦~歡迎技術(shù)交流
解決代碼
if (this.form.STORE_PROVINCE.length === 0 || this.form.STORE_PROVINCE.length == '') {
this.$message.error('請(qǐng)選擇至少一個(gè)區(qū)域')
return false
} else {
// 要執(zhí)行的代碼
}
以上便可解決了。
補(bǔ)充知識(shí)：element ui表單驗(yàn)證select既獲取label又獲取value
html部分
<el-form-item label="所屬公司" prop="comName">
<el-select v-model="ruleForm.comName" placeholder="請(qǐng)選擇所屬公司" @change="selectGet">
<el-option v-for="item in ruleForm.options2" :key="item.id" :value="item.id" :label="item.comName"></el-option>
</el-select>
</el-form-item>
js部分
//獲取selectlabel值
selectGet(vId){
let obj = {};
obj = this.ruleForm.options2.find((item)=>{//this.ruleForm
return item.id === vId;//篩選出匹配數(shù)據(jù)
});
console.log(obj.comName);//我這邊的name就是對(duì)應(yīng)label的
},
在data return里邊定義
data(){
return{
ruleForm:{
options:[
{id:1,comName:'BEIJING'},
{id:2,comName:'TIANJIN'}
]
}
}
}
以上這篇解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下2020-02-02
Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解
今天小編就為大家分享一篇Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在el-table中的記錄列表中放置了一個(gè) 操作按鈕,點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁簽,并將通過路由傳參方式將一些信息傳遞到新打開的tab頁簽中,但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn)報(bào)錯(cuò),所以本文給大家介紹了Vue2路由跳轉(zhuǎn)傳參中文問題處理方案,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了使用element upload上傳組件如何去掉刪除按鈕2023-07-07
Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)圖文詳解
本地開發(fā)一般通過執(zhí)行npm run serve命令來啟動(dòng)項(xiàng)目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關(guān)于vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)的相關(guān)資料,需要的朋友可以參考下2023-05-05
小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文2018-01-01
vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼
移動(dòng)端網(wǎng)頁的日常開發(fā)中,偶爾會(huì)包含一些渲染長列表的場景，本文主要介紹了vue 虛擬滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07