Vue+Element Plus 中按回车刷新页面问题排查与解决

- 原因分析
- 解决方案
- - [方法一：阻止默认行为 @submit.prevent](#方法一：阻止默认行为 @submit.prevent)
  - 方法二：只监听回车并触发搜索
  - 最终推荐写法如下：

在使用 Vue 3 + Element Plus 开发后台系统时，我们常常会通过搭配实现搜索功能。然而，你是否遇到过这样一个问题：

明明用户在输入框输入内容后按下回车键，本意是想执行搜索操作，但页面却整体刷新了，数据丢失，交互体验极差。

原因分析

HTML 原生元素在提交时，会触发 submit 事件，并默认刷新页面。

Element Plus 的实际上是基于原生实现的，因此也会继承这一行为。

所以：

如果你没有阻止表单提交的默认行为；
又刚好在输入框中按下了 Enter；
那么浏览器就会提交表单并刷新页面！

解决方案

方法一：阻止默认行为 @submit.prevent

javascript 复制代码

<el-form
  ref="queryFormRef"
  :model="queryParams"
  :inline="true"
  label-width="120px"
  @submit.prevent
>

这段代码的作用是：当 form 被提交时，阻止默认刷新页面的行为。

方法二：只监听回车并触发搜索

如果你希望回车时就直接触发搜索，也可以在输入框上监听 @keyup.enter：

javascript 复制代码

<el-input
  v-model="queryParams.productName"
  placeholder="请输入产品名称"
  clearable
  @keyup.enter="handleQuery"
/>

该方式适合在页面中没有的时候单独控制行为。

注意事项：

即使你使用了 @keyup.enter，如果仍在中而未阻止默认提交行为，页面仍然会刷新！所以：

javascript 复制代码

@keyup.enter 负责触发搜索  
@submit.prevent 负责阻止刷新

两者结合使用效果最佳。

最终推荐写法如下：

javascript 复制代码

<el-form
  ref="queryFormRef"
  :model="queryParams"
  :inline="true"
  label-width="120px"
  @submit.prevent
>
  <el-form-item label="产品名称" prop="productName">
    <el-input
      v-model="queryParams.productName"
      placeholder="请输入产品名称"
      clearable
      @keyup.enter="handleQuery"
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>