VUE項(xiàng)目中Element-ui 下拉組件驗(yàn)證失效怎么解決

今天就跟大家聊聊有關(guān)VUE項(xiàng)目中Element-ui 下拉組件驗(yàn)證失效怎么解決，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

問題描述：

在使用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)證還是為空,因此不能提交請求

解決思路：

如果說找遍組件里的方法都無法獲得我們適合使用的,那就要?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)然如果誰知道解決辦法也請分享給我哦~歡迎技術(shù)交流

解決代碼

if (this.form.STORE_PROVINCE.length === 0 || this.form.STORE_PROVINCE.length == '') {
    this.$message.error('請選擇至少一個(gè)區(qū)域')
    return false
  } else {
   // 要執(zhí)行的代碼
  }

以上便可解決了。

補(bǔ)充知識：element ui表單驗(yàn)證select既獲取label又獲取value

html部分

<el-form-item label="所屬公司" prop="comName">
    <el-select v-model="ruleForm.comName" placeholder="請選擇所屬公司" @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就是對應(yīng)label的
},

在data return里邊定義

data(){
  return{
    ruleForm:{
      options:[
        {id:1,comName:'BEIJING'},
        {id:2,comName:'TIANJIN'}
      ]
    }
  
  }
}

看完上述內(nèi)容，你們對VUE項(xiàng)目中Element-ui 下拉組件驗(yàn)證失效怎么解決有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。