使用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. 《手把手教你》系列技巧篇(十六)-java+ selenium自动化测试-元素定位大法之By xpath下卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

  2. [源码解析] 机器学习参数服务器 Paracel (2)--------SSP控制协议实现

    [源码解析] 机器学习参数服务器 Paracel (2)-----SSP实现 目录 [源码解析] 机器学习参数服务器 Paracel (2)-----SSP实现 0x00 摘要 0x01 背景知识 1 ...

  3. Cookie和Session得使用理解

    Cookie 饼干 什么是Cokkie? 1.Cookie 翻译过来是饼干的意思. 2.Cookie 是服务器通知客户端保存键值对的一种技术. 3.客户端有了 Cookie 后,每次请求都发送给服务器 ...

  4. Linux进程间通信方式--信号,管道,消息队列,信号量,共享内存

    1.概述 通信方法 无法介于内核态与用户态的原因 管道(不包括命名管道) 局限于父子进程间的通信. 消息队列 在硬.软中断中无法无阻塞地接收数据. 信号量 无法介于内核态和用户态使用. 内存共享 需要 ...

  5. 【LeetCode】88. 合并两个有序数组

    88. 合并两个有序数组 知识点:数组:排序:双指针: 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 ...

  6. 使用JS获取SessionStorage的值

    参考:https://www.jb51.net/article/132729.htm 获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert():让人容易看到, 其次, ...

  7. Javascript - Vue - 路由

    vue router.js 下载:vue-router.js, 该文件依赖于vue.js <script src="Scripts/vue-2.4.0.js">< ...

  8. ajax前后台通信验错

    目录 默认contenType下 总结以下例证: 1.当为简单JSON时 ajax controller vo 2.当为复杂JSON的时候 ajax controller vo 结果 contentT ...

  9. 转:JAVA 参数传递

    转自:http://blog.sina.com.cn/s/blog_5dd380b90100bvel.html 网络上有太多关于JAVA参数传递是传值还是传引用的讨论,其实大多是概念不清,混淆视听.从 ...

  10. 网络流量预测入门(三)之LSTM预测网络流量

    目录 网络流量预测入门(三)之LSTM预测网络流量 数据集介绍 预测流程 数据集准备 SVR预测 LSTM 预测 优化点 网络流量预测入门(三)之LSTM预测网络流量 在上篇博客LSTM机器学习生成音 ...