快捷導(dǎo)航

解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問(wèn)題

更新時(shí)間：2020年11月17日 15:08:07 作者：一航

這篇文章主要介紹了解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<el-select v-model="level" size="mini" placeholder="請(qǐng)選擇" :change="selectChange()">
 <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option>
 </el-select>

我們需要的是選擇之后才觸發(fā)，但是這樣寫(xiě)你會(huì)發(fā)現(xiàn)，頁(yè)面初始化的時(shí)候會(huì)觸發(fā)多次，選擇之后又會(huì)觸發(fā)多次，原因是我們用錯(cuò)了標(biāo)簽，應(yīng)該用 @change="selectChange()

 <el-select v-model="level" size="mini" placeholder="請(qǐng)選擇" @change="selectChange()">
 <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option>
 </el-select>

這樣寫(xiě)就可以了，v-bind的縮寫(xiě)是：，v-on的縮寫(xiě)是@，這里是觸發(fā)事件，應(yīng)該用@,

補(bǔ)充知識(shí)：為elment-ui的el-select選擇器添加onblur失焦事件產(chǎn)生的問(wèn)題

如下所示：

<div class="oneline">
     <span >用戶編號(hào)：</span>
     <div class="block left">
      <el-select
      :no-match-text="msg"
      :popper-append-to-body=false
      placeholder='請(qǐng)選擇'
      v-model="value" filterable popper-class='contentadd_select' 
      ref='select'>
       <el-option
        v-for="item in users"
        :key="item.accont"
        :label="item.accont"
        :value="item.accont">
       </el-option>
      </el-select>
     </div>
    </div>

所需要實(shí)現(xiàn)的功能是當(dāng)查詢輸入時(shí)，如果用戶輸入的數(shù)據(jù)是選項(xiàng)里面不匹配的，則返回顯示無(wú)匹配數(shù)據(jù)。

JS代碼如下

this.$refs.select.$refs.reference.$refs.input.onblur = ()=>{
    let haveitem=0;
    for(let i=0;i<this.users.length;i++){
     if(this.$refs.select.query==this.users[i].accont){
      haveitem++;
     }
    }
    if(!haveitem){
     this.value='無(wú)匹配數(shù)據(jù)'
     // this.msg=' '
    }
  }

上述代碼的this.$refs.select.query是選擇器輸入時(shí)查詢框綁定的值。

選擇器屬性有filterable屬性時(shí)為可查詢選擇。

使用開(kāi)發(fā)者工具測(cè)試時(shí)發(fā)現(xiàn)el-select選擇器數(shù)據(jù)綁定的對(duì)象value跟查詢輸入時(shí)的數(shù)據(jù)對(duì)象不是同一個(gè)，然后查看el-select源碼得知查詢輸入時(shí)的數(shù)據(jù)綁定在select.query上。

本來(lái)el-select有個(gè)blur事件綁定函數(shù)屬性。但是使用后發(fā)現(xiàn)有時(shí)候失焦事件并不能觸發(fā)生效，也就導(dǎo)致所綁定的函數(shù)不能執(zhí)行。

看了源碼得知blur這個(gè)事件函數(shù)有個(gè)定時(shí)器什么的，看不太懂，但是知道不是瀏覽器原生的失焦事件。

于是用vue的ref定位到該選擇器來(lái)實(shí)現(xiàn)綁定原生onblur事件，則可以避免這個(gè)問(wèn)題。

也可以使用操作dom查詢利用選擇器定位到這個(gè)選擇器進(jìn)行失焦事件綁定。

以上這篇解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: