vue+element Form键盘回车事件页面刷新解决

2019年9月15日 120次阅读 来源: tf桑奎岚

问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；

<el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="基金名称:" style="margin-bottom:0">
    <el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查询</el-button>
    </el-form-item>
 </el-form>

搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。

解决方案一：加一个隐藏的文本框，即表单不只有一个文本框，如下：

<el-form :inline="true"  class="demo-form-inline" >
    <el-form-item label="基金名称:" style="margin-bottom:0">
    <el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0;display:none;">
    <el-input @keyup.enter.native="doFilter(5)"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查询</el-button>
    </el-form-item>
</el-form>

element官方解决方案：在el-from 加上 @submit.native.prevent

<el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent>
    <el-form-item label="基金名称:" style="margin-bottom:0">
    <el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查询</el-button>
    </el-form-item>
</el-form>

以上两种方案均可解决。

    原文作者：tf桑奎岚
    原文地址: https://segmentfault.com/a/1190000016034270
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞