ElementPlus 或ElementUI搜索框添加回车监听刷新列表,结果回车后刷新了整个页面

本文主要是介绍ElementPlus 或ElementUI搜索框添加回车监听刷新列表,结果回车后刷新了整个页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ElementPlus 或ElementUI搜索框添加回车监听刷新列表,结果回车后刷新了整个页面

一、场景

今天在项目中遇见一个bug,在此做记录,给大家提供思路。

搜索栏进行搜索时,回车键本应该刷新数据列表,结果整个页面被刷新。

二、网上答案

在搜索栏中,如果只有一个<el-input>组件时,回车键会刷新整个页面。查看代码发现确实只有一个<el-input>组件。项目搜索部分代码如下:

 <el-form :model="queryParams" ref="queryForm" label-width="100px" @submit.native.prevent><el-row :gutter="16"><el-col :md="6"><el-form-item label="名称" prop="dictLabel"><el-inputv-model="queryParams.dictLabel"placeholder="请输入名称"clearable@keyup.enter="handleQuery"/></el-form-item></el-col><el-col :md="6" align="right" style="margin-left: auto;"><el-form-item class="search_btn_box"><el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button><el-button class="filter-item" style="margin-left: 8px;" @click="resetQuery">重置</el-button></el-form-item></el-col></el-row></el-form>

三、实测解决方案

<el-form>组件处添加@submit.native.prevent,参考上述代码。
VUE2,VUE3应该都是一样的,我这里用的是ElementPlus+VUE3

四、个人见解

@submit.native.prevent是阻止表单默认提交事件,当只有一个<el-input>组件,回车键会默认提交表单。

本来以为是事件的冒泡引起,后来尝试发现不是。

这篇关于ElementPlus 或ElementUI搜索框添加回车监听刷新列表,结果回车后刷新了整个页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1003837

相关文章

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,:本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模