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

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

<!--@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时搜索

el-select 是一个基于 Element UI 的下拉选择组件,它提供了丰富的功能和选项来满足不同的需求。在实践中,你可以按照以下步骤来使用 el-select 组件: 1. 安装 Element UI:首先,你需要在你的项目中安装 Element UI。可以通过 npm 或者 yarn 来安装,具体的安装方式可以参考 Element UI 的官方文档。 2. 引入 el-select 组件:在你需要使用 el-select 的页面或组件中,引入 el-select 组件。可以使用 import 语句将 el-select 组件引入到你的代码中。 3. 使用 el-select 组件:在模板中使用 el-select 组件,并设置相应的属性和事件。例如,你可以设置 options 属性来定义下拉选项的列表,设置 v-model 属性来绑定选中的值,设置 placeholder 属性来显示默认的提示文字等。 4. 处理选中事件:el-select 组件提供了 change 事件,可以在选中某个选项触发该事件。你可以在该事件的处理函数中获取选中的值,并进行相应的操作。 下面是一个简单的示例代码: ``` <template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </template> <script> import { ElSelect, ElOption } from 'element-ui'; export default { components: { ElSelect, ElOption }, data() { return { selectedValue: '', options: [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' } ] }; }, methods: { handleSelectChange(value) { console.log('选中的值:', value); // 处理选中事件的逻辑 } } }; </script> ``` 以上是一个简单的 el-select 的实践示例,你可以根据自己的需求进行相应的修改和扩展。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值