使用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 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。的更多相关文章

  1. form表单里如果只存在一个文本框,enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  2. 删除wordpress评论表单中的网址文本框

    原始效果如下 想要去掉这个链接表单,一般想到的方法就是找到 comments.php 文件中的对应表单代码删掉.但是现在只需要一段非常简单的代码就可以去除: 代码如下 复制代码 add_filter( ...

  3. IDEA连接Mysql数据库之后,在Mapper.xml编写SQL时不会自动提示表信息问题(非常详细!)

    1.首先得连接上数据库 (一)点击IDEA右侧数据库模块 (二)选择MySql进行连接 (三)填写数据库相关配置 (四)重点!!! 这个时候点击测试连接是连接不上的,需要设置时区 (按照如下设置) ( ...

  4. js-enter提交表单导致页面刷新问题

    问题:当页面只有一个文本框时,使用键盘enter操作执行提交表单的时候,会导致页面进行刷新,并且参数也会自动添加到url中. 解决办法: 1.给form添加onsubmit=return false; ...

  5. day056-58 django多表增加和查询基于对象和基于双下划线的多表查询聚合 分组查询 自定义标签过滤器 外部调用django环境 事务和锁

    一.多表的创建 from django.db import models # Create your models here. class Author(models.Model): id = mod ...

  6. BBS--功能4:个人站点页面设计(ORM跨表与分组查询)

    查询: 日期归档查询 1 date_format ============date,time,datetime=========== create table t_mul_new(d date,t t ...

  7. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  8. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  9. 5 功能4:个人站点页面设计(ORM跨表与分组查询)

    1.个人站点页面文章的查询 # 个人站点 http://www.cnblogs.com/wh1520577322/ http://www.cnblogs.com/liucong12345/ http: ...

随机推荐

  1. tomcat服务监控分析及自启

    #! /bin/bash # process-monitor.sh serverName="/usr/local/apache-tomcat-7.0.72-8080" #获取进程i ...

  2. 慕慕生鲜上线&&腾讯云服务器配置准备

    1.购买服务器并配置环境 1.1 购买 618购买了腾讯云服务器三年最低配置(1核2G 1Mbps 50G云盘),一时激动忘记了购买前领优惠券,痛失25元. 1.2 环境配置 系统是 CentOS L ...

  3. Git (10)-- 打标签(git tag)

    @ 目录 1.列出标签 2.创建标签 2.1.附注标签 2.2.轻量标签 3.后期打标签 4.共享标签 5.删除标签 6.检出标签 超详细 Git 图文版小白教程(持续更新) 像其他版本控制系统(VC ...

  4. noip 模拟9 题解

    rp++==文化课报废 考试经过 先看T1,有被1e12吓到,但根据经验这很可能是水题,经过一番观察后直接打表,似乎看出了规律,觉得应该有了正解,写完之后顺利过掉大样例,但似乎时间稍慢一点,写上快读交 ...

  5. 使用GZIP压缩网页内容(一)

    在JDK中提供了GZIP压缩,来压缩网页的内容,降低网络传输时候的字节数,到达浏览器端的时候,再解压,GZIP压缩之后传输耗费的流量大大降低,但是同时也不会降低用户体验. package day04; ...

  6. BeanUtils低依赖属性拷贝测试(一)

    javabean package entity; import java.util.Date; /** * 一个测试用: * student,javaBean * @author mzy * 一个标准 ...

  7. Scan error on column index 1, name “created_at“: unsupported Scan, storing driver.Value type []uint8

    使用gorm,出现以下报错 在连接数据库时加上: parseTime=True db, err = gorm.Open(utils.Db, fmt.Sprintf("%s:%s@(%s:%s ...

  8. 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)

    前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...

  9. AndroidJetpack Fragment之Navigation和ViewPager2

    新的Fragment导航方式:Navigation 1.创建若干个fragment 2.添加导航 1)新建Navigation:右键res文件夹,New->Android Resource Fi ...

  10. Qt编译工程提示qt creator no rule to make target opencv2/core/hal/interface.h need by debug解决方法

    总是提示 qt creator no rule to make target opencv2/core/hal/interface.h need by debug解决方法: 也算是花了整整两个小时踩坑 ...