vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法

时间:2022-06-02 20:08:19

项目中用的element-ui是v1.4.3版本

实现的功能是在input中输入查询的名称,按下键盘回车键,可以查询表格中数据

vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法

问题是,我输入名称,按下回车,会整个表单刷新,搜索条件也被清空;代码如下:

 <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" 变成 这样就可以了