Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法

产生的原因

  当 el-form 表单里只有一个 el-input 时,按下回车建会自动触发页面提交功能,因此导致了页面的刷新

 

解决方法

  解决方法1

    在表单中新增一个元素,使其不显示,目的在于不让 el-input 变成唯一,这样就不会引起刷新。

<el-form :model="form" ref="form" :inline="true">
    <el-form-item label="名称" prop="name" >
        <el-input v-model="form.name" @keydown.enter="query" />
  </el-form-item>
  <div></div>
</el-form>  

 

  解决方法2

    在 el-form 中 加个 @submit.native.prevent
    @submit: 表单提交
    .native 绑定系统原生事件
    .prevent 提交以后不刷新页面

<el-form :model="form" ref="form" :inline="true" @submit.native.prevent>
  <el-form-item label="名称" prop="name" >
    <el-input v-model="form.name" @keydown.enter.native="query" />
  </el-form-item>
</el-form>

 

posted @   偷熊计划  阅读(817)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示