vue el-input 使用回车键会刷新页面的问题

最新推荐文章于 2025-07-22 10:51:25 发布

原创最新推荐文章于 2025-07-22 10:51:25 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在Vue项目中，当form表单只有一个input时，按下回车会默认提交表单导致页面刷新。为防止这种情况，可以在el-form上添加@submit.native.prevent来阻止表单的默认提交行为，确保回车触发搜索功能。同时，使用@keyup.enter.native绑定handleQuery方法实现输入框回车搜索。

场景：
vue项目中在输入框输入字符并按下回车键搜索时，不会进行搜索，而是会刷新页面

原因：
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能，产生刷新页面的行为

解决：
如下代码，在 el-form 中加个 @submit.native.prevent，就可以了，
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

<el-form
 	:model="goodsListTab.queryParams"
    ref="queryForm"
    :inline="true"
    v-show="true"
    @submit.native.prevent
  >
    <el-form-item label="品名" prop="baseName" >
      <el-input
        v-model="goodsListTab.queryParams.baseName"
        placeholder="请输入品名"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
    </el-form-item>
</el-form>