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
随机推荐
- MySQL的运行模式及一些特性，引擎、事务、并发控制、优化总结
一 MySQL总体架构 上图是<高性能MySQL>中对MySQL总体架构的描述,客户端对服务端的连接有很多条,有一个专门的处理组件,类似tomcat使用线程池处理请求.解析器负责解析sql ...
- php----等比缩放图片
<?php /** * Created by PhpStorm. * User: admin * Date: 2019/11/19 * Time: 8:54 */ $filename = 'lo ...
- 对redis高并发测试的研究
以下引用大神的: 测试项目: https://github.com/14251104246/redis-demo.git 准备 使用docker-compose命令启动redis服务器(可以用其他方式 ...
- LeetCode--094--二叉树的中序遍历(python)
递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self.val = x # ...
- Intraweb IIS发布,数据连接问题
日前,用IW做了小东西,开始用单独的执行程序发布,一切都没有什么问题,但是发布到正式环境中,用windows IIS发布,怎么也获取不了程序所在的物理路径,而后看了万一的博客,试了一下程序能正常运行, ...
- React Native 之FlatList 下拉刷新和上拉加载更多
接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...
- idea导入eclipse云笔记cloud_note项目 成功运行
Tomcat 运行 Success
- 【PowerOJ1746&网络流24题】航空路线问题（费用流）
题意: 思路: [问题分析] 求最长两条不相交路径,用最大费用最大流解决. [建模方法] 把第i个城市拆分成两个顶点<i.a>,<i.b>. 1.对于每个城市i,连接(< ...
- Linux双网卡绑定和解除
转载双网卡绑定和解除 一定要在服务管理中关闭NetworkManager服务并禁用自动启动,因为NetworkManager服务是实时生效的,一旦设置错,管理员就得回到机房接显示器配置网络连接. 以 ...
- MySQL主从复制中replicate-ignore-db replicate-wild-ignore-table的应用
MySQL主从复制中replicate-ignore-db replicate-wild-ignore-table的应用 replicate-ignore-dbreplicate-wild-ignor ...