国产成人精品亚洲777人妖,欧美日韩精品一区视频,最新亚洲国产,国产乱码精品一区二区亚洲

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問(wèn)題

瀏覽:16日期:2022-11-05 10:12:32

問(wèn)題描述:

在使用Element-ui組件做項(xiàng)目開(kāi)發(fā)時(shí)候有可能會(huì)使用下拉框組件,如果下拉框組件的option選項(xiàng)是使用v-if指令遍歷的,

這樣也沒(méi)有問(wèn)題,但是如果加上multiple屬性,也就是可以多選 就會(huì)出現(xiàn)下拉框驗(yàn)證時(shí)失效問(wèn)題.

問(wèn)題現(xiàn)象:

解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問(wèn)題

如圖所示,明明已經(jīng)選擇了選項(xiàng),可是驗(yàn)證還是為空,因此不能提交請(qǐng)求

解決思路:

如果說(shuō)找遍組件里的方法都無(wú)法獲得我們適合使用的,那就要?jiǎng)佑迷竟α?/p>

console.log一下v-model在此組件上綁定的屬性,你發(fā)現(xiàn)你綁定的字符串(一般情況下都是String,這里就拿字符串舉例說(shuō)明)打印出來(lái)卻是Array

所以如果驗(yàn)證必填的話(huà)我們就直接判斷v-model在此組件上綁定的屬性的length是否大于0就好了;其他要求的話(huà)可以留言

思路驗(yàn)證:

我有試驗(yàn)過(guò)在rules增加type: ‘test’,表面上看起來(lái)是可以的,但是打開(kāi)控制臺(tái),它已經(jīng)報(bào)錯(cuò)了: Unkown rule type text,如下圖:

解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問(wèn)題

竟然沒(méi)有type=text屬性! 好吧~只能繼續(xù)

既然多選設(shè)置之后輸出的是數(shù)組, 那就跟chexkbox一樣 ,我可以把v-model屬性改成[],然后rules里面的type: ’array’實(shí)驗(yàn)一下,結(jié)果不報(bào)錯(cuò),但是驗(yàn)證也不生效

可見(jiàn)Element還是有坑踩哦,我的項(xiàng)目緊急就先原生解決了,哪天找到組件解決辦法我會(huì)及時(shí)更新的,當(dāng)然如果誰(shuí)知道解決辦法也請(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)證失效問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 磐安县| 万山特区| 凤翔县| 三都| 调兵山市| 金堂县| 新沂市| 陕西省| 日土县| 大关县| 玛纳斯县| 尼勒克县| 武穴市| 松滋市| 商丘市| 屏边| 承德市| 利川市| 刚察县| 长寿区| 鹿泉市| 高阳县| 北流市| 卢龙县| 信阳市| 慈溪市| 墨江| 蕲春县| 临清市| 中方县| 淳化县| 尤溪县| 安溪县| 临夏县| 凉山| 龙口市| 白沙| 徐闻县| 历史| 定襄县| 浦东新区|