zoukankan      html  css  js  c++  java
  • 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="6%;min- 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" 变成 这样就可以了

  • 相关阅读:
    RRC Server安装配置过程
    开园啦~
    VB.NET 初涉线程的定义和调用
    使用 VB.NET 开发多线程
    多线程 与 单线程 的区别
    Marshal 类的内存操作的一般功能
    VB.NET 内存指针和非托管内存的应用
    OpenProcess() 函数
    DataTable与结构不同实体类之间的转换
    C#的同步和异步调用方法
  • 原文地址:https://www.cnblogs.com/fangnianqin/p/9549900.html
Copyright © 2011-2022 走看看