解決vue elementUI 使用el-select 時 change事件的觸發問題

2020-11-17 21:20:06

如下所示：

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

我們需要的是選擇之後才觸發，但是這樣寫你會發現，頁面初始化的時候會觸發多次，選擇之後又會觸發多次，原因是我們用錯了標籤，應該用 @change="selectChange()

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

這樣寫就可以了，v-bind的縮寫是：，v-on的縮寫是@，這裡是觸發事件，應該用@,

補充知識：為elment-ui的el-select選擇器新增onblur失焦事件產生的問題

如下所示：

<div class="oneline">
     <span >使用者編號：</span>
     <div class="block left">
      <el-select
      :no-match-text="msg"
      :popper-append-to-body=false
      placeholder='請選擇'
      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>

所需要實現的功能是當查詢輸入時，如果使用者輸入的資料是選項裡面不匹配的，則返回顯示無匹配資料。

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='無匹配資料'
     // this.msg=' '
    }
  }

上述程式碼的this.$refs.select.query是選擇器輸入時查詢框繫結的值。

選擇器屬性有filterable屬性時為可查詢選擇。

使用開發者工具測試時發現el-select選擇器資料繫結的物件value跟查詢輸入時的資料物件不是同一個，然後檢視el-select原始碼得知查詢輸入時的資料繫結在select.query上。

本來el-select有個blur事件繫結函數屬性。但是使用後發現有時候失焦事件並不能觸發生效，也就導致所繫結的函數不能執行。

看了原始碼得知blur這個事件函數有個定時器什麼的，看不太懂，但是知道不是瀏覽器原生的失焦事件。

於是用vue的ref定位到該選擇器來實現繫結原生onblur事件，則可以避免這個問題。

也可以使用操作dom查詢利用選擇器定位到這個選擇器進行失焦事件繫結。

以上這篇解決vue elementUI 使用el-select 時 change事件的觸發問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援it145.com。

解決vue elementUI 使用el-select 時 change事件的觸發問題

熱門文章