vue+element Form键盘回车事件页面刷新解决

问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；


&lt;el-form :inline="true"  class="demo-form-inline"&gt;&lt;el-form-item label="基金名称:" style="margin-bottom:0"&gt;&lt;el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;&lt;/el-form-item&gt;&lt;el-form-item style="margin-bottom:0"&gt;&lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查询&lt;/el-button&gt;&lt;/el-form-item&gt;&lt;/el-form&gt;

搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件，导致页面的刷新。

解决方案一：加一个隐藏的文本框，即表单不只有一个文本框，如下：


&lt;el-form :inline="true"  class="demo-form-inline" &gt;&lt;el-form-item label="基金名称:" style="margin-bottom:0"&gt;&lt;el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;&lt;/el-form-item&gt;&lt;el-form-item style="margin-bottom:0;display:none;"&gt;&lt;el-input @keyup.enter.native="doFilter(5)"&gt;&lt;/el-input&gt;&lt;/el-form-item&gt;&lt;el-form-item style="margin-bottom:0"&gt;&lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查询&lt;/el-button&gt;&lt;/el-form-item&gt;
&lt;/el-form&gt;

element官方解决方案：在el-from 加上 @submit.native.prevent


&lt;el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent&gt;&lt;el-form-item label="基金名称:" style="margin-bottom:0"&gt;&lt;el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;&lt;/el-form-item&gt;&lt;el-form-item style="margin-bottom:0"&gt;&lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查询&lt;/el-button&gt;&lt;/el-form-item&gt;
&lt;/el-form&gt;

以上两种方案均可解决。

来源：https://segmentfault.com/a/1190000016034270

vue+element Form键盘回车事件页面刷新解决相关推荐

[vue] vue给组件绑定自定义事件无效怎么解决？
[vue] vue给组件绑定自定义事件无效怎么解决? 两种方式 1.组件外部加修饰符.navtive 2.组件内部声明$emit('自定义事件') 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
键盘回车事件导致页面刷新的问题
我最近在做一个 Ajax 查询的功能,代码如下: <form name="keywordForm" method="post" action=&quo ...
Vue+Element实现tab页多页面切换
效果图GIF 源码地址 https://gitee.com/marlife/nav-tags.git 已经上传到Gitee(码云),代码拉下来之后: 1.执行安装命令:npm install 2.执行 ...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
废话不说,上代码! nav 1 nav 2 nav 3 重点: 1,selectedkeys要设置成$route.path地址 2,a-menu-item 的key设置成要去的地址刷新页面,成功! ...
element 的 el-form （禁止页面刷新与from验证 vue3）
一.在添加el-from后点击会导致整个页面刷新,在vue3中可以如下避免: <el-formref="submitFormRef":model="createFo ...
微信小程序软键盘回车事件
应用场景主要是在搜索的时候输入框输入完内容以后,点击软键盘上的回车调用搜索方法,代码如下: wxml: <input placeholder="粘贴商品标题或直接输入" va ...
vue+elementUI 键盘回车事件导致页面刷新的问题
在控件上已经添加了: @keyup.enter.native="searchProjects()" 监听,但是回车确是reload 页面,需要在表单上form上添加: <el ...
vue监听键盘Esc事件
mounted() {//监听键盘Esc按键事件let self = this;this.$nextTick(function() {document.addEventListener('keydow ...
vue element form中input等组件不能输入值
<el-input v-model="form.inputVal " /> 由于data中form只是一个空对象{},当主动设置 form.inputVal = &qu ...

vue+element Form键盘回车事件页面刷新解决

vue+element Form键盘回车事件页面刷新解决相关推荐

最新文章

热门文章