vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询

需求：
1、页面中有输入框，选择框，日期时间选择，按回车键实现查询功能

网上查了都是在el-select弹框消失时（visible-change返回false），使select失去焦点的，然后页面document绑定keyup事件。
这样做，如果页面上其它控件有回车事件，就会被覆盖掉，比如分页选择器中的回车事件。

解决思路：
1、隐藏下拉框：查看el-select源码发现下拉框的显示隐藏由visible变量在回车键按下去时(keydown)控制。这就好办了，给组件设置keydown事件，控制组件上的visible为false隐藏即可。

2、按回车键事件查询，组件上添加@keyup.enter.native="query"
query是查询方法

 <el-selectref="loanTypeSelect"v-model="queryData.loan_type"clearable:placeholder="$t('operation.select')"@keydown.enter.native="disableVisible"@keyup.enter.native="query"><!-- 添加ref="loanTypeSelect" --><!-- 添加@keydown.enter.native="disableVisible" -->

 disableVisible() {this.$refs.loanStatusSelect.visible = false
}

3、日期选择框实现回车键查询稍麻烦，
在日期选择框下添加一个input标签(使其不可见，不能display：none；否则无法获取焦点)
<input ref="queryInput" style="position:absolute; z-index:-99;" type="text" @keyup.enter="query">
在change事件方法中每次改变日期后，这个添加的隐形input框都会获取焦点；再给这个input标签设置@keyup.enter="query"即可

 <time-select:title="$t('collection.repaymentDate') + ':'":is-close="manageClose":need-time="true"@tiems="repaymentDates"@focus-btn="focusBtn"></time-select><input ref="queryInput" style="position:absolute; z-index:-99;" type="text" @keyup.enter="query"><!-- 此处选择器是el-select经过封装后，但思路一致 -->

vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询相关推荐

【项目实战】select+input实现下拉框左右选择+模糊查询功能
前言: 在项目中用遇到下拉框左右选择的需求,而easyui没有找到合适的插件,就想着用listbox来实现,但后来针对这个项目中没有想到合适的办法(ps:大家有了可以推荐哟),从网上看了一些demo, ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
Selenium：利用select模块处理下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
element ui字段_ui备忘单下拉字段
element ui字段重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询
下拉菜单支持拼音缩写查询下拉菜单其实就是select选择器下拉菜单,功能就是可以支持拼音缩写查询 1.既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github ...
jQuery easyui中combox 自定义样式去掉下拉框的空白
EasyUI中combox下拉框的默认样式有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白: <div style ...
Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法
参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...

vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询

vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询相关推荐

最新文章

热门文章