选中el-select组件在按回车时，如何隐藏下拉菜单

最新推荐文章于 2025-02-12 17:39:51 发布

呆子小木心

最新推荐文章于 2025-02-12 17:39:51 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/cc6_66/article/details/120453991

版权

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用Element UI组件库的下拉菜单，并通过监听键盘事件和可见性变化来控制下拉菜单的显示与隐藏。文中详细展示了如何利用@visible-change事件及@keyup.enter.native事件来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!--@visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false（可查看elementUi官网）-->
<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 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>

methods: {
	// 是否显示下拉框
	isShowSelectOptions(isShowSelectOptions){
		if(!isShowSelectOptions) this.$refs.selectProvinces.blur();
		if(!isShowSelectOptions) this.$refs.selectCitys.blur();
	},
}