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

最新推荐文章于 2024-03-29 11:23:18 发布

hinihaoaaa

最新推荐文章于 2024-03-29 11:23:18 发布

阅读量683

点赞数

文章标签： vue+element Form

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


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

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

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


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

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


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

以上两种方案均可解决。

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

hinihaoaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue+element Form键盘回车事件页面刷新解决

问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；&amp;lt;el-form :inline="true" class="demo-form-inline"&amp;gt; &amp;lt;el-form-ite...
复制链接

扫一扫