当前位置: 首页 > news >正文

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>
http://www.dtcms.com/a/272092.html

相关文章:

  • pytorch 神经网络
  • 深入理解机器学习
  • 【深度学习新浪潮】什么是持续预训练?
  • 深度学习中的常见损失函数详解及PyTorch实现
  • B2、进度汇报(— 25/06/16)
  • Sigma-Aldrich细胞培养基础知识:细胞培养的安全注意事项
  • Vue 中监测路由变化时,通常不需要开启深度监听(deep: true)
  • 基于Python的旅游推荐协同过滤算法系统(去哪儿网数据分析及可视化(Django+echarts))
  • 《Stata面板数据分析:数据检验、回归模型与诊断技术 - 以NLSW工资研究(公开数据)为例》
  • android studio 运行,偶然会导致死机,设置Memory Settings尝试解决
  • 不止于快:金士顿XS2000移动固态硬盘如何重塑你的数字生活
  • 机器学习1
  • ssh: connect to host github.com port 22: connection refused
  • Web学习笔记2
  • 使用球体模型模拟相机成像:地面与天空的可见性判断与纹理映射
  • 「py数据分析」04如何将 Python 爬取的数据保存为 CSV 文件
  • 基于Python的程序员数据分析与可视化系统的设计与实现
  • 三、神经网络——网络优化方法
  • 线上事故处理记录
  • XMAPP MySQL 启动后自动停止
  • 【实战】Dify从0到100进阶--文档解读(1)开源许可和大模型适配
  • Using Spring for Apache Pulsar:Transactions
  • MySQL断开连接后无法正常启动解决记录
  • 第一次搭建数据库
  • JavaScript 树形菜单总结
  • 2025社交电商新风口:推客小程序的商业逻辑与技术实现
  • 数据结构与算法之美:广义表
  • 通过vue如何利用 Three 绘制 简单3D模型(源码案例)
  • Redis中BigKey的隐患
  • Mysql分片:一致性哈希算法