el-select組件綁定change事件踩坑

要注意區(qū)分elementUI組件（比如el-select、el-button、el-input等組件）的focus、click、change等事件和DOM的focus、click、change原生事件，二者是不一樣的。

如果要在element組件上觸發(fā)原生事件，一律都得加.native修飾符，否則無法觸發(fā)事件。

但是要注意很多elementUI的組件本身封裝了focus、click、change等事件，比如el-button的click事件，是經(jīng)過elementUI封裝過的，所以給el-button綁定click事件時，不需要加.native修飾符，el-input的@focus事件也是同理。

今天踩了一個坑，在給el-select綁定change事件時，沒搞清楚該change事件是elementUI封裝過的change事件@change=“changeGateway(event)”，發(fā)現(xiàn)event一直是和選中的option的value值保持一致，按照網(wǎng)上博客寫的event.target.value拿到的值一直都是undefined，最后才發(fā)現(xiàn)，博客里的select是原生的select，而我寫的是el-select，給el-select綁定的change事件不是dom原生的change事件，而是elementUI封裝過了的change事件，回調(diào)函數(shù)的參數(shù)是下拉列表目前的選中值，所以$event才一直和選中的option的value值保持一致。

另外要注意由于el-select組件已經(jīng)封裝了change事件，就無法再綁定原生的change事件，如果對el-select綁定change事件像@change.native這樣寫，change事件是不會觸發(fā)的！

再次強調(diào)：

elementUI組件如果已經(jīng)封裝過click、change、focus等事件，則無法再綁定DOM原生的click、change、focus事件，即使加.native修飾符也沒用。

但今天來了個需求，在點擊選擇關(guān)聯(lián)網(wǎng)關(guān)的下拉列表時，不僅要傳網(wǎng)關(guān)name參數(shù)給后端，還要在改變option的同時再額外多傳一個gatewayIp參數(shù)給后端，這個gatewayIp要在下拉列表option的數(shù)據(jù)里面拿，起初想通過給el-select組件綁定change事件拿到選中的option的完整數(shù)據(jù)，最終發(fā)現(xiàn)做不到，那樣只能拿到選中的option的value值（因為elementUI封裝的change事件的回調(diào)參數(shù)就是下拉列表目前的選中值，見上圖），最后的實現(xiàn)思路是給el-option綁定原生click事件拿到選中的option的完整數(shù)據(jù)item

代碼如下：

<el-form-item label="關(guān)聯(lián)網(wǎng)關(guān)" prop="bindGateName">
  <el-select v-model="form.bindGateName" placeholder="請選擇" clearable>
    <el-option v-for="item in bindGates" :label="item.gateWayInfo.name" :value="item.gateWayInfo.name" @click.native="changeGateway(item)" :key="item.gateWayId"></el-option>
  </el-select>
</el-form-item>

changeGateway(data){
  // console.log(data) //此data是選中的那個option的完整數(shù)據(jù)item 
  this.form.gateWayIp = data.gateWayInfo.ip;
},

el-select實現(xiàn)change事件

官網(wǎng)提供了el-select的change事件，但是并沒有提供使用示例，但是最近在vue項目中卻要使用到。

直接上代碼，HTML部分

<el-select @change="selectChanged" v-model="devType" size=small>
?? ?<el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>

js部分

data() {
? return {
? ? devType: '',
? ? devTypes: []
? }
},
?
methods: {
? selectChanged(value) {
?? ?console.log(value)
? }
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論