el-select和el-cascader的visible-change下拉框隱藏時觸發相關事件（下拉框下拉顯示時不觸發）

原文：https://blog.csdn.net/CarryBest/article/details/79959389

今天做項目時，用elementUI框架，需要下拉框隱藏時出發某個函數，用了visible-change這個函數，發現點擊時會觸發兩次我自己定義的函數，看了下官網的解釋 ：下拉框出現/隱藏時觸發   如果只想在下拉框隱藏時觸發該怎么做呢?下面是解決辦法：
官網定義：
Select Events

 

@visible-change 函數里面傳遞兩個參數（第一個為回調參數，第二個為自己定義的參數）

前台頁面：

<el-select v-model="AREACODE" placeholder="請選擇" clearable @visible-change="changeValue1($event,AREACODE)">
    <el-option 
        v-for="item in AreaOptions" 
        :key="item.AREACODE" 
        :label="item.NAME" 
        :value="item.AREACODE"> 
    </el-option>
</el-select>

JS:

changeValue1:function(callback,vc){ //只有回調參數為false時才觸發 ctx.getAreaListDataSearch(vc,1)這個函數;
console.log("回調參數"+callback);
if(!callback){
var ctx = this;
ctx.AREACODE2='請選擇';
if(vc!=""){
ctx.show2 = true;
ctx.getAreaListDataSearch(vc,1);
}
}
},

這樣就解決了這個函數會默認調用兩次你自己定義函數的問題

備注：

el-select的visible-change="changeValue1($event,AREACODE) 會傳遞兩個參數，即把選中的值也會傳給函數，但是el-cascader的不會傳這個值，那么如何獲取選中的值呢，

方法一：

判斷this.$refs['cascaderAddr'].getCheckedNodes()非空列表，使用this.$refs['cascaderAddr'].getCheckedNodes()[0] 參考：https://blog.csdn.net/lijiabinbbg/article/details/97396812

方法二：使用change

<el-cascader
  id="el-cascader"
  v-model.trim="formTemp.service"
  :disabled="currentStep!='apply'"
  :options="serviceOptions"
  :props="{ expandTrigger: 'hover' }"
  :show-all-levels="true"
  separator="." @change="handleServiceSelect"
  >
</el-cascader>

在methods中定義

    handleServiceSelect(serviceInfo) {
      // 這塊會自動傳這個serviceInfo值的注意var serviceKey = serviceInfo.join('.')
    },