element-ui框架中el-select组件在按回车时，如何隐藏下拉菜单，并触发键盘事件

场景：

根据产品需求，下拉菜单在按下回车后进行搜索

判断页面所需的筛选项是否为空，如果为空，按下回车，不执行查询

按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点）

label-width="110px"

class="ele-form-search"

@keyup.enter.native="search"

@submit.native.prevent

>

v-model="where.isUsed"

placeholder="请选择"

clearable

class="ele-fluid"

ref="selectProvinces"

@visible-change="isShowSelectOptions"

>

v-for="item in usedStatuslistdata"

:key="item.id"

:label="item.desc"

:value="item.id"

/>

v-model="where.isDisable"

placeholder="请选择"

clearable

class="ele-fluid"

ref="selectCitys"

@visible-change="isShowSelectOptions"

>

v-for="item in disableStatuslistdata"

:key="item.id"

:label="item.desc"

:value="item.id"

/>

created() {

// 全局添加事件监听

window.addEventListener('keyup', this.search)

},

methods: {

// 是否显示下拉框

isShowSelectOptions(isShowSelectOptions){

if(!isShowSelectOptions) this.$refs.selectProvinces.blur();

if(!isShowSelectOptions) this.$refs.selectCitys.blur();

},

// 条件查询数据

search(e) {}

}

3. 重要函数：

@visible-change=“isShowSelectOptions”

或者

直接在

el-select上加上

:popper-append-to-body="!showSearch ? true : false"

例如：

v-model="where.partsStatusId"

filterable

placeholder="请选择"

clearable

class="ele-fluid"

:popper-append-to-body="!showSearch ? true : false"

>

v-for="item in partsStatuslistdata"

:key="item.id"

:label="item.desc"

:value="item.id"

/>

参考：https://www.freesion.com/article/32101060707/