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

场景：

1. 根据产品需求，下拉菜单在按下回车后进行搜索
2. 判断页面所需的筛选项是否为空，如果为空，按下回车，不执行查询
3. 按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点）

源码：

<el-col :md="8" :sm="12" :xs="24">
	<el-form-item label="出差城市：" style="margin-bottom: -18px;">
		<el-col :span="11">
			<el-form-item prop="provinceId">
				<el-select
					style="width: 100%;"
					v-model="form.provinceId"
					placeholder="出差省份"
					ref="selectProvinces"
					@visible-change="isShowSelectOptions"
					@change="changeProvinces"
				>
					<el-option
						v-for="item in provinces"
						:key="item.id"
						:label="item.districtName"
						:value="item.id"
					></el-option>
				</el-select>
			</el-form-item>
		</el-col>
		<el-col class="line" :span="2" style="text-align: center">-</el-col>
		<el-col :span="11">
			<el-form-item prop="electionCity">
				<el-select
					style="width: 100%;"
					v-model="form.cityId"
					placeholder="出差城市"
					ref="selectCitys"
					@visible-change="isShowSelectOptions"
				>
					<el-option
						v-for="item in citys"
						:key="item.districtCode"
						:label="item.districtName"
						:value="item.id"
					></el-option>
				</el-select>
			</el-form-item>
		</el-col>
	</el-form-item>
</el-col>

created() {
	……
	// 全局添加事件监听
	window.addEventListener('keyup', this.handleSearch)
},
methods: {
	// 是否显示下拉框
	isShowSelectOptions(isShowSelectOptions){
		if(!isShowSelectOptions) this.$refs.selectProvinces.blur();
		if(!isShowSelectOptions) this.$refs.selectCitys.blur();
	},

	// 条件查询
	handleSearch(e) {
		let condition = e.keyCode == 13 && (this.form.provinceId || this.form.cityId);
		if(condition){
			this.pageIndex = 1;
			this.selectLoading = true;
			let beginRequestDate = this.form.beginRequestDate ? formatDate(new Date(this.form.beginRequestDate)) : '';
			let endRequestDate = this.form.endRequestDate ? formatDate(new Date(this.form.endRequestDate)) : '';
			let beginStartDate = this.form.beginStartDate ? formatDate(new Date(this.form.beginStartDate)) : '';
			let endStartDate = this.form.endStartDate ? formatDate(new Date(this.form.endStartDate)) : '';
			let provinceId = this.form.provinceId;
			let cityId = this.form.cityId;
			let params1 = {
				pageNo: this.pageIndex, //当前页
				pageSize: 10, //每页显示条数
				approvalState: this.approvalState, //审核状态
				employeeId: this.userId,
				beginRequestDate,
				endRequestDate,
				beginStartDate,
				endStartDate,
				provinceId,
				cityId,
				orderBy: 'request_date'
			};
			// 执行查询函数
			this.getElectionList(params1);
		}
	}
}

3. 重要函数：

1. @visible-change=“isShowSelectOptions”
   

如果对您有帮助，点个赞收藏一下呗！