小程序价格为什么比网站建设高,个人房产备案查询网上查询,深圳外贸公司前十名,俄罗斯跨境电商平台ozonVueElement Plus 中按回车刷新页面问题排查与解决原因分析解决方案方法一#xff1a;阻止默认行为 submit.prevent方法二#xff1a;只监听回车并触发搜索最终推荐写法如下#xff1a;在使用 Vue 3 Element Plus 开发后台系统时#xff0c;我们常常会通过 搭配 实现搜索功…
VueElement Plus 中按回车刷新页面问题排查与解决原因分析解决方案方法一阻止默认行为 submit.prevent方法二只监听回车并触发搜索最终推荐写法如下在使用 Vue 3 Element Plus 开发后台系统时我们常常会通过 搭配 实现搜索功能。然而你是否遇到过这样一个问题
明明用户在输入框输入内容后按下回车键本意是想执行搜索操作但页面却整体刷新了数据丢失交互体验极差。
原因分析
HTML 原生 元素在提交时会触发 submit 事件并默认刷新页面。 Element Plus 的 实际上是基于原生 实现的因此也会继承这一行为。 所以 如果你没有阻止表单提交的默认行为 又刚好在输入框中按下了 Enter 那么浏览器就会提交表单并刷新页面
解决方案
方法一阻止默认行为 submit.prevent
el-formrefqueryFormRef:modelqueryParams:inlinetruelabel-width120pxsubmit.prevent这段代码的作用是当 form 被提交时阻止默认刷新页面的行为。
方法二只监听回车并触发搜索
如果你希望回车时就直接触发搜索也可以在输入框上监听 keyup.enter
el-inputv-modelqueryParams.productNameplaceholder请输入产品名称clearablekeyup.enterhandleQuery
/该方式适合在页面中没有 的时候单独控制行为。
注意事项 即使你使用了 keyup.enter如果仍在 中而未阻止默认提交行为页面仍然会刷新所以
keyup.enter 负责触发搜索
submit.prevent 负责阻止刷新
两者结合使用效果最佳。
最终推荐写法如下
el-formrefqueryFormRef:modelqueryParams:inlinetruelabel-width120pxsubmit.prevent
el-form-item label产品名称 propproductNameel-inputv-modelqueryParams.productNameplaceholder请输入产品名称clearablekeyup.enterhandleQuery//el-form-itemel-form-itemel-button typeprimary iconSearch clickhandleQuery搜索/el-buttonel-button iconRefresh clickresetQuery重置/el-button/el-form-item
/el-form
