element ui el-select点击图标无法关闭下拉框问题
- 当el-select设置了filterable 筛选的时候 点击图标无法关闭下拉框
- 思路：利用visible-change方法获取下拉框打开和关闭事件，然后focus方法拿到鼠标事件
上代码：
<template>
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
ref="select"
:label="item.label"
@visible-change="visibleChange"
@focus="focus"
:value="item.value">
</el-option>
</el-select>
</template>
<javascript>
data(){
return:{
inputFlag:null
}
},
methods:{
focus() {
if (this.inputFlag) {
this.$refs.select.blur()
}
},
visibleChange(val) {
setTimeout(() => {
this.inputFlag = val
}, 0)//让其异步，不然可能会先执行visibleChange 后执行focus，就会有bug
},
}
</javascript>
