使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面:
原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新。
1 <el-form :inline="true" :model="getForm" class="demo-form-inline">
2 <el-form-item label="科目名称">
3 <el-input v-model.trim="getForm.exam_name"@keyup.enter.native="search"
></el-input>
4 </el-form-item>
5 </el-form>
解决方案:在 el-from 加上 @submit.native.prevent
1 <el-form :inline="true" :model="getForm" class="demo-form-inline" @submit.native.prevent>
2 <el-form-item label="科目名称">
3 <el-input v-model.trim="getForm.exam_name"@keyup.enter.native="search"
></el-input>
4 </el-form-item>
5</el-form>
使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。的更多相关文章
- form表单里如果只存在一个文本框,enter键提交
在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...
- 删除wordpress评论表单中的网址文本框
原始效果如下 想要去掉这个链接表单,一般想到的方法就是找到 comments.php 文件中的对应表单代码删掉.但是现在只需要一段非常简单的代码就可以去除: 代码如下 复制代码 add_filter( ...
- IDEA连接Mysql数据库之后,在Mapper.xml编写SQL时不会自动提示表信息问题(非常详细!)
1.首先得连接上数据库 (一)点击IDEA右侧数据库模块 (二)选择MySql进行连接 (三)填写数据库相关配置 (四)重点!!! 这个时候点击测试连接是连接不上的,需要设置时区 (按照如下设置) ( ...
- js-enter提交表单导致页面刷新问题
问题:当页面只有一个文本框时,使用键盘enter操作执行提交表单的时候,会导致页面进行刷新,并且参数也会自动添加到url中. 解决办法: 1.给form添加onsubmit=return false; ...
- day056-58 django多表增加和查询基于对象和基于双下划线的多表查询聚合 分组查询 自定义标签过滤器 外部调用django环境 事务和锁
一.多表的创建 from django.db import models # Create your models here. class Author(models.Model): id = mod ...
- BBS--功能4:个人站点页面设计(ORM跨表与分组查询)
查询: 日期归档查询 1 date_format ============date,time,datetime=========== create table t_mul_new(d date,t t ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本
在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...
- 5 功能4:个人站点页面设计(ORM跨表与分组查询)
1.个人站点页面文章的查询 # 个人站点 http://www.cnblogs.com/wh1520577322/ http://www.cnblogs.com/liucong12345/ http: ...
随机推荐
- .Net Core with 微服务 - 分布式事务 - 2PC、3PC
最近比较忙,好久没更新了.这次我们来聊一聊分布式事务. 在微服务体系下,我们的应用被分割成多个服务,每个服务都配置一个数据库.如果我们的服务划分的不够完美,那么为了完成业务会出现非常多的跨库事务.即使 ...
- Spark的两种核心Shuffle详解
在 MapReduce 框架中, Shuffle 阶段是连接 Map 与 Reduce 之间的桥梁, Map 阶段通过 Shuffle 过程将数据输出到 Reduce 阶段中.由于 Shuffle 涉 ...
- 文件上传 安鸾 Writeup
目录 Nginx解析漏洞 文件上传 01 文件上传 02 可以先学习一下文件上传相关漏洞文章: https://www.geekby.site/2021/01/文件上传漏洞/ https://xz.a ...
- Blind SQL injection:盲注详解
什么是盲注? 当应用程序易受SQL注入攻击,但其HTTP响应不包含相关SQL查询的结果或任何数据库错误的详细信息时,就会出现盲SQL注入. 对于盲目SQL注入漏洞,许多技术(如联合攻击)都是无效的,因 ...
- JVM 基础面试题总结
hey guys, 各位小伙伴们大家好,这里是程序员cxuan,欢迎你收看我新一期的文章,这篇文章我花了几天时间给你汇总了一波 JVM 的基础知识和面试题,内容还不是很全,我还在连载中,这篇文章相当于 ...
- Python 赋值、浅拷贝、深拷贝之间区别
赋值 不会开辟新的内存空间,是对原对象值的引用 当原对象值,改变后,赋值的变量也会随之改变 浅拷贝 只会拷贝最外层的对象,会开辟新的内存空间,和原对象是互相独立的 如果这个对象有嵌套对象的话,浅拷贝只 ...
- NOIP 模拟 $21\; \rm Median$
题解 \(by\;zj\varphi\) 对于这个序列,可以近似得把它看成随机的,而对于随机数列,每个数的分布都是均匀的,所以中位数的变化可以看作是常数 那么可以维护一个指向中位数的指针,同时维护有多 ...
- 题解 big
传送门 题面里那个式子 考场上我推了半天那个式子代表什么意思,但就是没想到位运算 \(\lfloor \frac{2x}{2x^n} \rfloor \iff x\gg(n-1)\), 即将x的第n位 ...
- SpringBoot整合SpringBatch
一.引入依赖 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&q ...
- CPU 进程 线程 关系与区别