当前位置: 首页 > 工具软件 > v-selectmenu > 使用案例 >

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

李法
2023-12-01

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

<!--@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();
	},
}

补充:
@keyup.enter.native=“selectBlur” //实现回车搜索
@blur=“selectBlur” //实现输入框失去焦点时搜索
@change=“getTableData” //实现选择某一个option时搜索

 类似资料: