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>