按下回车,如何让下拉菜单隐藏(或者失去焦点,因为下拉项要显示的前提是获取焦点)
<!--@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时搜索