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

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

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

原因分析

HTML 原生 元素在提交时，会触发 submit 事件，并默认刷新页面。
Element Plus 的 实际上是基于原生 实现的，因此也会继承这一行为。
所以：

• 如果你没有阻止表单提交的默认行为；

• 又刚好在输入框中按下了 Enter；

• 那么浏览器就会提交表单并刷新页面！

解决方案

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

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

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

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

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

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

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

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

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

两者结合使用效果最佳。

最终推荐写法如下：

<el-formref="queryFormRef":model="queryParams":inline="true"label-width="120px"@submit.prevent
><el-form-item label="产品名称" prop="productName"><el-inputv-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>