el-select和el-cascader的visible-change下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）

​

今天做项目时，用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('.')
    },      

做有积累的事~~