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事件時(shí)，不需要加.native修飾符，el-input的@focus事件也是同理。

今天踩了一個(gè)坑，在給el-select綁定change事件時(shí)，沒搞清楚該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事件，如果對(duì)el-select綁定change事件像@change.native這樣寫，change事件是不會(huì)觸發(fā)的！

再次強(qiáng)調(diào)：

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

但今天來了個(gè)需求，在點(diǎn)擊選擇關(guān)聯(lián)網(wǎng)關(guān)的下拉列表時(shí)，不僅要傳網(wǎng)關(guān)name參數(shù)給后端，還要在改變option的同時(shí)再額外多傳一個(gè)gatewayIp參數(shù)給后端，這個(gè)gatewayIp要在下拉列表option的數(shù)據(jù)里面拿，起初想通過給el-select組件綁定change事件拿到選中的option的完整數(shù)據(jù)，最終發(fā)現(xiàn)做不到，那樣只能拿到選中的option的value值（因?yàn)閑lementUI封裝的change事件的回調(diào)參數(shù)就是下拉列表目前的選中值，見上圖），最后的實(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="請(qǐng)選擇" 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是選中的那個(gè)option的完整數(shù)據(jù)item 
  this.form.gateWayIp = data.gateWayInfo.ip;
},

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

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

直接上代碼，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é)

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