el-input 使用 回车键会刷新页面的问题
使用el-input的时候,光标聚焦在输入框,按下回车,会刷新页面。这是因为当el-form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 产生刷新页面的行为
解决办法
法一:
form表单内多增加一个元素,不占据位置即可
<el-form :model="form" ref="formRef" :inline="true" >
<el-form-item label="姓名" prop="name" >
<el-input v-model="form.name" placeholder="请输入品名" @keydown.enter="handleQuery" />
</el-form-item>
// form表单内多增加一个元素,不占据位置即可
<div></div>
</el-form>
法二:
如下代码,在 el-form 中 加个 @submit.native.prevent,就可以了,
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面
// 在 el-form 中 加个 @submit.native.prevent
<el-form :model="form" ref="formRef" :inline="true" @submit.native.prevent>
<el-form-item label="姓名" prop="name" >
<el-input v-model="form.name" placeholder="请输入品名" @keydown.enter="handleQuery" />
</el-form-item>
</el-form>
el-input 使用 回车键会刷新页面的问题的更多相关文章
- <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面
<asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页
jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...
- 表单中设置了 `keyup.enter.native` 的按键事件,但是回车后没有执行查询,反而会刷新页面
场景 添加属性对话框中,input输入后点击 enter,不会执行绑定的 handleDialogQuery 事件,反而会刷新整个页面: 如果不点击 enter,点击搜索按钮,则是正常的. 又测试:在 ...
- js刷新页面方法大全
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
- 刷新页面时 select值保持不变
刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...
- js 刷新页面window.location.reload();
Javascript刷新页面的几种方法:1 history.go(0)2 window.location.reload() window.location.reload(true) 3 ...
- 利用js刷新页面方法
1,reload 方法,该方法强迫浏览器刷新当前页面. location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-S ...
随机推荐
- JQuery拖拽移动
/** * zzh_2022032101_拖拽移动 * @param obj 目标对象 / #id / .class * @param moveOut 是否可以移出边界 */ function dra ...
- C语言写的 史上最公平的投票系统
#include<stdio.h> #include<string.h> #define MMM 4 struct student { char name[10]; int c ...
- Quorum NWR
1.强一致性与最终一致性 1.1强一致性 强一致性能保证写操作完成后,任何后续访问都能读到更新后的值:强一致性可以保证从库有与主库一致的数据.如果主库突然宕机,我们仍可以保证数据完整.但如果从库宕机或 ...
- _Bool類型
_Bool類型:布爾變量,其值只有1(真)和0(假).是C語言中的變量名,C語言中所有的非0數字都被視爲真. 給布爾變量取一個能表示真或假值的變量名是一種常見的做法. 1 /*boolean.c--使 ...
- 委派模式——从SLF4J说起
作者:vivo 互联网服务器团队- Xiong yangxin 将某个通用解决方案包装成成熟的工具包,是每一个技术建设工作者必须思考且必须解决的问题.本文从业内流行的既有工具包入手,解析实现思路,沉淀 ...
- 【随笔记】SiliconLabs Android Demo 编译
AndroidStudio:3.5.2 AndroidPhone:XiaoMi5 (Android 8.0) AndroidDemo:3.1.4-44 AndroidDemo 源码路径:Simplic ...
- 解决:ChatGPT too many requests in 1 hour.Try again later 怎么办?OpenAI 提示
ChatGPT 提示: Too many requests in 1 hour. Try again later. 如下图,我多次访问也出现同样的问题.中文意思是太多的请求数量在当前 1 个小时内,请 ...
- java 启动查看jar包加载顺序并设置classpath
本文为博主原创,转载请注明出处: 1.idea查看jar包加载顺序 jdk8 可以通过 -XX:+TraceClassPaths 参数进行查看jar包的加载顺序 jdk11 可以通过 ...
- 翻译《threejsfundamentals》离屏渲染+web-worker一篇
Three.js OffscreenCanvas OffscreenCanvas是一种相对较新的浏览器功能,目前仅在Chrome中可用,但显然也即将适用于其他浏览器. OffscreenCanv ...
- Cheat Engine 中文设置汉化教程
下载地址:https://www.cheatengine.org/downloads.php 下载windows 安装版本以及中文翻译包: 1.安装程序:一路NEXT即可 2.打开程序安装位置在在文件 ...