Vue+Element Plus 中按回车刷新页面问题排查与解决
Vue+Element Plus 中按回车刷新页面问题排查与解决
- 原因分析
- 解决方案
- 方法一：阻止默认行为 @submit.prevent
- 方法二：只监听回车并触发搜索
- 最终推荐写法如下：
在使用 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>