vue+element Form键盘回车事件页面刷新解决
问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。
解决方案一：加一个隐藏的文本框，即表单不只有一个文本框，如下：
<el-form :inline="true" class="demo-form-inline" >
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0;display:none;">
<el-input @keyup.enter.native="doFilter(5)"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
element官方解决方案：在el-from 加上 @submit.native.prevent
<el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
以上两种方案均可解决。
来源：https://segmentfault.com/a/1190000016034270
vue+element Form键盘回车事件页面刷新解决的更多相关文章
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- vue:element-ui输入框绑定回车事件
参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...
- jquery 键盘回车事件
<input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...
- vue中常用的两中页面刷新的方式和页面回退
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...
- vue通过路由传值及在页面刷新后如何保存值
1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路 ...
- 移动端点击返回时强制页面刷新解决办法(pageshow)
在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...
- vue 键盘回车事件导致页面刷新的问题，路由多了一个问号
问题: <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native=&q ...
- vue+element 页面输入框--回车导致页面刷新的问题
el-form 后面加上 @submit.native.prevent
随机推荐
- 如何提高SMTP邮件的安全性？从而不被黑客窃听
简单邮件传输协议(SMTP)用于在邮件服务器之间进行邮件传输,并且传统上是不安全的,因此容易被黑客窃听.命名实体的基于DNS的认证(国家统计局)用于SMTP提供了邮件传输更安全的方法,并逐渐变得越来越 ...
- 什么原因？全球许多网络提供商推迟部署IPv6
全球许多网络提供商推迟部署IPv6,指出升级路由器和交换机的成本以及NAT为扩展IPv4地址所取得的令人印象深刻的成就. 这并没有阻止像澳门CTM这样的互联网服务供应商不要冒险,以此为榜样,并且满足终 ...
- 《SaltStack技术入门与实践》——执行结果处理
执行结果处理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 Return组件可以理解为SaltStack系统对执行Minion返回后的数据进行存储或 ...
- 【NOIP2016提高A组8.11】自然数
题目 分析 \(O(n)\)求出mex(1,i)(1<=i<=n): 虽然0<=ai<=10^9,但只有n个数,所以mex一定小于等于n for(long long j=1;j ...
- NOIP模拟赛(by hzwer) T2 小奇的序列
[题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个长度为 n 的数列,以及 m 次询问,每次给出三个数 l,r 和 P, 询问 (a[l'] + a[l'+1] + ... + ...
- 【leetcode】827. Making A Large Island
题目如下: 解题思路:这个题目可以进行拆分成几个子问题.第一,求出island的数量,其实就是 200. Number of Islands,这个很简单,DFS或者BFS都能搞定:第二,除了求出isl ...
- LeetCode--105--从前序与中序遍历序列构造二叉树（python）
根据一棵树的前序遍历与中序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 前序遍历 preorder = [3,9,20,15,7]中序遍历 inorder = [9,3,15,2 ...
- setData 机制
解释:setData 函数,用于将数据,从逻辑层发送到视图层,当开发者调用 setData 后,数据的变化,会引起视图层的更新.参数说明 属性 类型 是否必填 描述 data Object 是 这次要 ...
- Android CPU使用率：top和dump cpuinfo的不同
CPU是系统非常重要的资源,在Android中,查看CPU使用情况,可以使用top命令和dump cpuinfo.我记得很久以前,就发现这两者存在不同,初步猜测应该是算法上存在差异.最近需要采集应用C ...
- 个推基于 Zipkin 的分布式链路追踪实践
作者:个推应用平台基础架构高级研发工程师 阿飞 01业务背景 随着微服务架构的流行,系统变得越来越复杂,单体的系统被拆成很多个模块,各个模块通过轻量级的通信协议进行通讯,相互协作,共同实现系统 ...