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

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

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

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

	<el-select
            ref="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经过封装后,但思路一致 -->
Logo

前往低代码交流专区

更多推荐