zoukankan      html  css  js  c++  java
  • vue+element Form键盘回车事件页面刷新解决

    问题描述:如下代码所示,使用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>
    

    以上两种方案均可解决。

    来源:https://segmentfault.com/a/1190000016034270

  • 相关阅读:
    Common Words
    The end of other
    避免ssh断开导致运行命令的终止:screen
    Check iO:初学Python
    linux环境c++开发:ubuntu12.04使用llvm3.4.2
    boost库使用:仿SGI-STL实现的一个树节点allocator
    boost库使用:vs2013下boost::container::vector编译出错解决
    读论文系列:Nearest Keyword Search in XML Documents中使用的数据结构(CT、ECT)
    房产律师咨询
    E文阅读
  • 原文地址:https://www.cnblogs.com/datiangou/p/10148588.html
Copyright © 2011-2022 走看看