vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法
项目中用的element-ui是v1.4.3版本
实现的功能是在input中输入查询的名称,按下键盘回车键,可以查询表格中数据

问题是,我输入名称,按下回车,会整个表单刷新,搜索条件也被清空;代码如下:
<sc-form-layout class="sc-box-content sc-box-conten-search">
<sc-form-layout-row>
<sc-form-layout-col>
<el-form :model="queryConditions" >
<sc-form-layout>
<sc-form-layout-row>
<sc-form-layout-col></sc-form-layout-col>
<sc-form-layout-col width="standard">
<el-form-item label="">
<el-input v-model="queryConditions.fileName" auto-complete="off"
icon="search" placeholder="请输入报告名称/文件名称"
:on-icon-click='onQuery' @keyup.native.enter='onQuery'
></el-input>
</el-form-item>
</sc-form-layout-col>
<sc-form-layout-col align="right" style="width:6%;min-width: 180px;">
<el-button type="primary" @click="onQuery" v-cloak>{{actions.query.text}}</el-button>
<el-button @click="onReset" v-cloak>{{actions.reset.text}}</el-button>
</sc-form-layout-col>
</sc-form-layout-row>
</sc-form-layout>
</el-form>
</sc-form-layout-col>
</sc-form-layout-row>
</sc-form-layout>
查询方法没什么问题,后来查到是当我按下回车的时候,触发了表单的submit事件,然后整个表单就会被刷新,解决方法:
中加上 onSubmit="return false" 变成 这样就可以了
vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- element ui,input框输入时enter健进行搜索
<el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...
- MVC client validation after PartialView loaded via Ajax MVC3中 弹出 Dialog时候 提交的时候 使用 Jquery 不验证 form表单 的解决办法
I came across this scenario whereby my main View uses Ajax posts to retrieve PartialViews and delive ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
随机推荐
- [Swift实际操作]七、常见概念-(9)使用定时组件Timer执行定时任务
本文将为你演示计时器的使用,使用计时器可以每隔一定时间执行某个函数. 在左侧的项目导航区,打开视图控制器的代码文件:ViewController.swift现在开始编写代码,实现任务定时的功能.定义一 ...
- maven添加仓库没有的jar包
mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging= ...
- D07——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D07 20180826内容纲要: 面向对象进阶学习 1 静态方法 2 类方法 3 属性方法 4 类的特殊成员方法(本节重点) 5 反射(本节重点) 6 异常(本 ...
- web应用配置虚拟路径映射方式一配置不成功问题解决办法
配置过程图: 为了方便输入,先修改Tomcat的conf文件下的server.xml文件 默认端口修改为80 配置完成之后访问报404错误解决办法: 一.如果配置前已经开启了Tomcat服务器,配置完 ...
- android动态权限获取
android动态权限获取 Android6.0采用新的权限模型,只有在需要权限的时候,才告知用户是否授权,是在runtime时候授权,而不是在原来安装的时候 ,同时默认情况下每次在运行时打开页面时候 ...
- Explorer内存占用偶尔变高导致卡顿
症状: 打开 "这台电脑",加载缓慢.此时查看任务管理器,explorer内存可能飙升到几G.cpu也很高 创建和删除文件缓慢,删除单个文件也会出现进度条.此时查看任务管理器,会出 ...
- linux把程序添加到全局环境变量
比如把, nginx服务放到全局变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录
- [转] 使用 MVC 5 的 EF6 Code First 入门 系列
译文:http://www.cnblogs.com/Bce-/category/573301.html 原文:http://www.asp.net/mvc/overview/getting-start ...
- 小游戏专场:腾讯云Game-Tech技术沙龙上海站顺利落下帷幕
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 9月14日腾讯云GAME-TECH技术沙龙小游戏专场在上海顺利举办,此次技术沙龙由腾讯云的资深专家,以及 ...
- .Net Core全球化多语言
参照:ASP.NET Core 全球化和本地化 步骤如下: 后台中的本地化. Startup.cs中注册服务并制定Resource文件的位置.注意:这里的位置不仅仅应用到Web层,如Infrastru ...