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做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
随机推荐
- java实现fp-growth算法
本文参考韩家炜<数据挖掘-概念与技术>一书第六章,前提条件要理解 apriori算法. 另外一篇写得较好的文章在此推荐: http://hi.baidu.com/nefzpohtpndho ...
- redis内存监控与回收
Redis有自己的内存分配器,当key-value对象被移除时,Redis不会马上向操作系统释放其占用内存.redis之所以这样的设计有两个原因. OS可能会将释放内存交换到虚拟内存,但OS的虚拟内存 ...
- Java CAS ABA问题发生的场景分析
提到了CAS操作存在问题,就是在CAS之前A变成B又变回A,CAS还是能够设置成功的,什么场景下会出现这个问题呢?查了一些资料,发现在下面的两种情况下会出现ABA问题. 1.A最开始的内存地址是X,然 ...
- day67 crm(4) stark组件的增删改 以及 model_from使用和from组件回顾
前情提要:Django stark 组件开发的 增删改, model_form组件的使用 form组件的回顾 一:list_display_link 创建 功能描述: 使包含的字段能 ...
- vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- 快速排序的理解和实现(Java)
快速排序介绍 快速排序(Quick Sort)使用分治法策略,其基本思想是:通过一趟排序将待排序记录分割成独立的两部分,其中一部分记录的关键字均比另外一部分记录的关键字小,则可分别对这两部分记录继续进 ...
- #阿里云#云服务器部署Django(基础篇)
前言 本人能力有限,本文只是简单介绍基础部署流程,没有过多考虑系统安全等因素,请谅解.初学者参考了解,大神勿喷. 纯测试部署,采用阿里云ECS,系统Ubuntu 16.04 64位,部署采用nginx ...
- sql子查询在insert、update、delete中的应用
子查询可以应用在INSERT.UPDATE以及DELETE等语句中,合理的使用子查询将能够简化功能的实现并且极大的提高SQL语句执行的效率 用到的表: CREATE TABLE `t_readerfa ...
- 按照Right-BICEP要求对实验二进行测试
我的代码实现的功能很简单,在最基本的功能上,包括有无括号(0/1),有无负数(0/1),有无乘除法(0/1)验证程序的正确性,测试用例为8个,2^3个,也就覆盖了所有的代码路径. 测试计划: 基本功能 ...
- Fiddler HTTPS抓包
现在很多带有比较重要信息的接口都使用了安全性更高的HTTPS,而Fiddler默认是抓取HTTP类型的接口,要想查看HTTPS类型接口就需要安装fiddler证书. fiddler安装教程可参考: ...