問題描述：

在使用Element-ui元件做專案開發時候有可能會使用下拉框元件,如果下拉框元件的option選項是使用v-if指令遍歷的,

這樣也沒有問題,但是如果加上multiple屬性,也就是可以多選 就會出現下拉框驗證時失效問題.

問題現象：

如圖所示,明明已經選擇了選項,可是驗證還是為空,因此不能提交請求

解決思路：

如果說找遍元件裡的方法都無法獲得我們適合使用的,那就要動用原生基本功了

console.log一下v-model在此元件上繫結的屬性,你發現你繫結的字串(一般情況下都是String,這裡就拿字串舉例說明)打印出來卻是Array

所以如果驗證必填的話我們就直接判斷v-model在此元件上繫結的屬性的length是否大於0就好了;其他要求的話可以留言

思路驗證：

我有試驗過在rules增加type: ‘test',表面上看起來是可以的,但是開啟控制檯,它已經報錯了: Unkown rule type text,如下圖:

竟然沒有type=text屬性! 好吧~只能繼續

既然多選設定之後輸出的是陣列,那就跟chexkbox一樣,我可以把v-model屬性改成[],然後rules裡面的type: 'array'實驗一下,結果不報錯,但是驗證也不生效

可見Element還是有坑踩哦,我的專案緊急就先原生解決了,哪天找到元件解決辦法我會及時更新的,當然如果誰知道解決辦法也請分享給我哦~歡迎技術交流

解決程式碼

if (this.form.STORE_PROVINCE.length === 0 || this.form.STORE_PROVINCE.length == '') {
    this.$message.error('請選擇至少一個區域')
    return false
  } else {
   // 要執行的程式碼
  }

以上便可解決了。

補充知識：element ui表單驗證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;//篩選出匹配資料
  });
  console.log(obj.comName);//我這邊的name就是對應label的
},

在data return裡邊定義

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

以上這篇解決VUE專案使用Element-ui 下拉元件的驗證失效問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。