项目中用的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'回车查询刷新整个表单的解决办法的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  3. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  4. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  5. element ui,input框输入时enter健进行搜索

    <el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...

  6. 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 ...

  7. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  8. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  9. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

随机推荐

  1. jQuery核心函数的四种不同用法

    核心函数根据实参的不同,有四种不同的用法. ①传一个函数作为参数 例如:$(function(){}) 作用:和window.onload = function(){}类似,它会在文档加载完成之后运行 ...

  2. Python小白学习之路(十七)—【内置函数二】

    序列操作类函数 all() 功能:判断可迭代对象的每个元素是否都为True值注意:If the iterable is empty, return True.(举例3) 回顾:None     ''  ...

  3. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  4. Markdown编辑器-图形化

    SELECT * from yffee_favourable_detail yfd LEFT JOIN yffee_favourable yf on yfd.minor_id = yf.major_i ...

  5. Hadoop/Spark生态圈里的新气象

    令人惊讶的是,Hadoop在短短一年的时间里被重新定义.让我们看看这个火爆生态圈的所有主要部分,以及它们各自具有的意义. 对于Hadoop你需要了解的最重要的事情就是 ,它不再是原来的Hadoop. ...

  6. SQL2008无法连接到(local),该账户当前被锁定,所以Sa用户登陆失败

    1 安装小结 换了电脑,很多软件都得重装,期间报了很多问题,比如说先装vs2008再装sql server2008r2会报一个“存在2008早期版本”,通过查找,百度一系列的坑爹之路后,我还是把vs2 ...

  7. java.sql.SQLException: Access denied for user 'root '@'localhost' (using password: YES) 最蠢

    我犯了七年前的错误,一个空格,昨天就想到的,还对比了一下密码有没有空格 问题原因1:多写空格 在datasource.properties 中的username 的值root后面多写了一个空格, jd ...

  8. SqlServer入门学习

    --distinct(去除重复数据)select distinct Time from HightTable--Between select * from HightTable where ID BE ...

  9. webfrom后台

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  10. SQL——Sql_Server中如何判断表中某字段、判断表、判断存储过程以及判断函数是否存在

    一.比如说要判断表A中的字段C是否存在两个方法: (1) 直接查表——有点笨,有点常规 IF EXISTS ( SELECT 1 FROM SYSOBJECTS T1 INNER JOIN SYSCO ...