使用 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: ...
 
随机推荐
- C++面向对象总结——虚指针与虚函数表
			
最近在逛B站的时候发现有候捷老师的课程,如获至宝.因此,跟随他的讲解又复习了一遍关于C++的内容,收获也非常的大,对于某些模糊的概念及遗忘的内容又有了更深的认识. 以下内容是关于虚函数表.虚函数指针, ...
 - String.trim的作用
			
Java的字符串处理方法trim是如何改变字符串的?下面是一个例子: @Test public void testTrim() { String test = "origin"; ...
 - CYPEESS USB3.0程序解读之---同步FIFO(slaveFifoSync)
			
上一篇文章解读了CYPRESS FX3的GPIO的操作过程,下面解读同步FIFO的一个例子(slaveFifoSync). *生产者,消费者. 1.首先看DMA的回调函数(cyu3dma.h): ty ...
 - erlang学习笔记
			
安装 Ubuntu Server上: sudo apt-get install erlang 如果安装时下载 太慢,可手工下载deb包( esl-erlang_16.a-rc1_ubuntu_prec ...
 - WPF(MVVM) 利用资源字典实现中英文动态切换
			
1.首先新建两个字典文件en-us.xaml.zh-cn.xaml.定义中英文的字符串在这里面. 2.将两个资源字典添加到App.xaml中,这里注意下,因为两个字典中有同样字符,如果没有动态更改,默 ...
 - kivy之TextInput属性实操练习
			
TextInput属性比较多,常用在页面设计上的属性做了实操练习,便于很直观的了解学习本部件.并将其中一个输入提示的属性在实操源码里单独建立了一个功能进行演示. 主程序文件main.py我就不贴出来了 ...
 - Linux 记录学习
 - C++类的构造函数后面加一个冒号的含义
			
最近在看侯捷老师讲解的C++知识,他讲到在构造函数加一个冒号初始化值的方法,会使代码更大气,在此记录一下使用方法 构造函数冒号后的初始化class complex{public: complex(do ...
 - C#设计模式---模板方法模式(Template Method Pattern)
			
一.目的 模板方法模式把不变行为搬到超类中,从而去除了子类中的重复代码. 二.定义 模板方法模式:在一个抽象类中定义一个操作的算法骨架,将算法骨架中某些特定的操作延迟到子类中实现. 模板方法使得子类在 ...
 - IPython中也要保持优雅(DRY原则)
			
What is IPython? IPython provides a rich architecture for interactive computing with: A powerful int ...