今天做項目時,用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]
方法二:使用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('.')
},
做有積累的事~~