vue3+ts+element-plus 表单el-form取消回车默认提交
问题描述:在表单el-form中的el-input中按回车后,页面会刷新,url也会改变,
回车前:

回车后:

相关代码:

解决方法1:在 el-form 上阻止默认的 submit 事件,增加 @submit.prevent,在 el-form 上监听 submit 事件,并调用 event.preventDefault() 来阻止默认的提交行为。

解决方法2:在 el-form 上阻止默认的 submit 事件,增加 @submit.native.prevent,在 el-form 上监听 submit.native 事件,并调用 event.preventDefault() 来阻止默认的提交行为。

解决方法3:在 el-form 上阻止 keydown 回车事件,增加 @keydown.enter.prevent,在 el-form 上监听 keydown.enter 事件,并调用 event.preventDefault()来阻止默认的回车行为。

解决方法4:在 指定的 el-input 组件上阻止 keydown 回车事件,增加 @keydown.enter.prevent,在 el-input 上监听 keydown.enter 事件,并调用 event.preventDefault()来阻止默认的回车行为。

扩展:
经过上述调整后,在el-input中按回车后不会默认提交表单了,但还需要实现在el-input中按回车后进行查找(相当于点击后面的查找按钮)

修改后的代码:
<!-- 使用 @keydown.enter.prevent 或 @submit.prevent 或 @submit.native.prevent 取消回车默认提交 --><el-form inline style="height: 32px;" @keydown.enter.prevent><el-form-item><!-- 使用 @keydown.enter="onSearchClick" 按回车进行查找 --><!-- 使用 @keydown.a.enter.b="onSearchClick" 按a键、回车键、b键都可以进行查找,注意:= 左边的内容不能使用大写字母 --><el-input v-model="name" placeholder="请输入查找内容" clearable @keydown.enter="onSearchClick"><template #append><el-button :icon="Search" @click="onSearchClick" /></template></el-input></el-form-item></el-form>
@keydown.enter="onSearchClick"
@keydown.a.enter.b.c.d……="onSearchClick" 按a键、回车键、b键、c键、d键都可以进行查找,注意:= 左边的内容不能使用大写字母
相关文章:
vue3+ts+element-plus 表单el-form取消回车默认提交
问题描述:在表单el-form中的el-input中按回车后,页面会刷新,url也会改变, 回车前: 回车后: 相关代码: 解决方法1:在 el-form 上阻止默认的 submit 事件,增加 submit.pre…...
Web Services 简介
Web Services 简介 1. 引言 Web Services 是一种基于网络的软件服务,它允许不同的应用程序在互联网上相互通信和交互。这种技术是基于开放的互联网标准,如HTTP、XML、SOAP和WSDL,使得不同平台和编程语言的应用程序能够轻松地实现互操作性。Web Services 的出现,极大地推动…...
Vue3苦逼的学习之路
从一名测试转战到全栈是否可以自学做到,很多朋友肯定会说不可能,或就算转了也是个一般水平,我很认同,毕竟没有经过各种项目的摧残,但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容,大佬勿…...
AcWing练习题:两点间的距离
给定两个点 P1 和 P2,其中 P1P1 的坐标为 (x1,y1),P2 的坐标为 (x2,y2),请你计算两点间的距离是多少。 distance√(x2−x1)^2(y2−y1)^2 输入格式 输入共两行,每行包含两个双精度浮点数 xi,yi,表示其中一个点的坐标…...
文献分享:RoarGraph——跨模态的最邻近查询
文章目录 1. \textbf{1. } 1. 导论 1.1. \textbf{1.1. } 1.1. 研究背景 1.2. \textbf{1.2. } 1.2. 本文的研究 1.3. \textbf{1.3. } 1.3. 有关工作 2. \textbf{2. } 2. 对 OOD \textbf{OOD} OOD负载的分析与验证 2.1. \textbf{2.1. } 2.1. 初步的背景及其验证 2.1.1. \textbf{2…...
故事可视化AI
i68,爱六八,链接你我他 StoryWeaver故事可视化 通过知识增强的角色定制技术,实现高质量的故事可视化论文链接:https://arxiv.org/pdf/2412.07375项目仓库:https://github.com/Aria-Zhangjl/StoryWeaver由厦门大学多媒体可信感知与高效计算教育部重点实验室和网易伏…...
【机器学习篇】从新手探寻到算法初窥:数据智慧的开启之门
文章目录 【机器学习篇】从新手探寻到算法初窥:数据智慧的开启之门前言一、什么是机器学习?二、机器学习的基本类型1. 监督学习(Supervised Learning)2. 无监督学习(Unsupervised Learning)3. 半监督学习&a…...
ffmpeg八大开发库
FFmpeg八大库是指FFmpeg项目中最重要的八个库,它们各自承担不同的功能,共同构成了FFmpeg的强大功能。以下是这八大库的详细介绍: libavcodec:负责音频和视频的编解码。它支持多种编解码器,如H.264、AAC、MP3、…...
【ArcGISPro/GeoScenePro】解决常见的空间参考和投影问题
修复空间参考缺失的图像 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 查看属性坐标 查看属性范围 范围值并不是零或接近于零。 这意味着栅格具有范围,因此其已正确进行...
Linux上安装配置单节点zookeeper
直接先去官网下载安装包, https://downloads.apache.org/zookeeper/ 选择合适的版本,然后上传至服务器 解压: tar -zxvf apache-zookeeper-3.9.3-bin.tar.gz创建data和logs目录 mkdir data mkdir logs配置环境变量: vim /etc/p…...
现代光学基础-1
总结自老师的讲义 yt1 目录 光纤通信系统 组成部分三大里程碑技术实例分析 激光器 定义自振荡器的特性组成输出特性应用领域 受激辐射、自然辐射与吸收 LASER的定义受激辐射的特点光与物质的相互作用能量守恒与材料特性净增益条件 谐振器 定义组成部分性能描述 F-P谐振器&am…...
pytorch中nn.Conv2d详解及参数设置原则
文章目录 基础参数1. in_channels (输入通道数)2. out_channels (输出通道数)3. kernel_size (卷积核大小)4. stride (步幅)5. padding (填充)6. dilation (膨胀)7. groups (分组卷积)8. bias (偏置) 如何设置参数?1. **in_channels 和 out_channels(输入…...
T-SQL语言的正则表达式
T-SQL语言的正则表达式 在现代数据库管理系统中,SQL(结构化查询语言)被广泛用于数据的操作与管理。对数据的查询、插入、更新和删除几乎是每一个数据库管理系统中的基本功能。T-SQL(Transact-SQL)是微软对SQL的扩展&a…...
UDP_TCP
目录 1. 回顾端口号2. UDP协议2.1 理解报头2.2 UDP的特点2.3 UDP的缓冲区及注意事项 3. TCP协议3.1 报头3.2 流量控制2.3 数据发送模式3.4 捎带应答3.5 URG && 紧急指针3.6 PSH3.7 RES 1. 回顾端口号 在 TCP/IP 协议中,用 “源IP”, “源端口号”…...
Python 中常见的数据结构之二推导式
Python 中常见的数据结构之二推导式 使用推异式列表推导式字典推导式集合推导式 使用推异式 推导式是一种从已存在的序列中快速构建列表(list)、集合(set) 和 字典(dictionary)方式。Python 支持 3 种不同类型的推导式: 列表推导式;字典推导式…...
STM32 拓展 低功耗案例3:待机模式 (hal)
配置PA0的两种方式: 第一种 第二种 复制寄存器代码然后对其进行修改 mian.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body…...
【开源社区openEuler实践】探索 Yocto-Meta-OpenEuler:嵌入式开发的强大基石
title: 探索 Yocto-Meta-OpenEuler:嵌入式开发的强大基石 date: ‘2024-11-19’ category: blog tags: Yocto-Meta-OpenEuler嵌入式系统开源项目定制化开发 sig: EmbeddedTech archives: ‘2024-12’ author:way_back summary: Yocto-Meta-OpenEuler 为嵌入式系统开…...
C++ hashtable
文章目录 1. 基本概念2. 哈希函数3. 哈希冲突及解决方法开放定址法链地址法再哈希法建立公共溢出区4. 哈希表的操作实现5. 内存管理及优化 时间复杂度理想情况(无哈希冲突或冲突极少)一般情况(考虑哈希冲突及解决方法)综合来看 以…...
JS (node) 的 ACM 模式 + debug方法 (01背包为例)
文章目录 JS 的 ACM 模式输入处理 JS dubug (01背包为例)动态输入在本地通过 Node.js 运行和调试 硬编码 Hard CodingVS Code JS 的 ACM 模式 在 JavaScript 中,ACM 模式一般通过 Node.js 的 readline 模块实现。 输入处理 使用 readline 模块监听输入。 将每行输…...
vue设计与实现-框架设计
权衡的艺术 命令式和声明式 视图层框架通常分为命令式和声明式,各有优缺。jquery是一种命令式框架。命令式框架关注过程,而声明式框架关注结果。对于vue来说,过程被vue封装了,所以vue内部是命令式的,但vue暴露给用户…...
AGI如何重构人力资源管理闭环:从人才画像到组织健康度预测的7步落地方法论
第一章:AGI驱动的人力资源管理范式跃迁 2026奇点智能技术大会(https://ml-summit.org) 传统人力资源管理正经历由通用人工智能(AGI)引发的结构性重构——从流程自动化迈向认知协同、从经验决策转向因果推演、从岗位适配升维至潜能涌现。AGI不…...
乙巳马年春联生成终端GPU算力适配:显存优化实现毫秒级开门响应
乙巳马年春联生成终端GPU算力适配:显存优化实现毫秒级开门响应 1. 项目背景与挑战 每到新春佳节,贴春联是家家户户的传统习俗。随着技术的发展,用AI生成个性化春联已经成为一种新颖的互动方式。我们开发的“皇城大门春联生成终端”正是这样…...
别再死记硬背了!用‘生命周期’图解法,5分钟搞懂Android加固与脱壳的核心对抗点
用生命周期图解法透视Android加固与脱壳的核心对抗逻辑 第一次接触Android加固技术时,我盯着反编译工具里那些"类不存在"的报错信息发呆——明明APK文件就在那里,为什么连最基本的代码结构都看不到?直到把DEX文件的生命周期拆解成一…...
网络拓扑发现实战:从LLDP数据采集到D3.js可视化前端全链路解析
网络拓扑发现实战:从LLDP数据采集到D3.js可视化全链路解析 现代网络架构正变得越来越复杂,从传统的三层架构到如今的云原生网络,设备之间的连接关系呈现出动态化、多样化的特征。对于网络运维团队而言,如何快速准确地掌握全网拓扑…...
【独家首发】SITS2026中文适配版同步上线!覆盖11类本土高价值场景(政务推演、中医辨证、工业根因分析),含37个真实脱敏案例集
第一章:SITS2026发布:AGI能力基准测试 2026奇点智能技术大会(https://ml-summit.org) SITS2026(Singularity Intelligence Test Suite 2026)是首个面向通用人工智能(AGI)系统设计的多模态、跨任务、可演化…...
别再死记硬背MAML公式了!用PyTorch手把手带你跑通第一个元学习Demo(附完整代码)
从零实现MAML元学习:PyTorch实战指南与核心代码解析 元学习(Meta-Learning)作为机器学习领域的前沿方向,正在重新定义我们构建智能系统的方式。与传统的"从零学习"模式不同,元学习让模型掌握了"学习如何…...
婚礼照片不用再群里发,宾客扫个码直接上传到共享相册
结过婚的人都知道,婚礼当天宾客拍的照片,最后都是零零散散发到群里或者私发给你。整理起来特别费劲,有些照片你还没看到,宾客就已经忘了发。等到婚礼结束想做一本纪念册,翻遍手机和各个群聊,还是找不到几张…...
AI建站工具选型指南:五大模式横向对比与筛选标准
面对“AI建站工具”这个概念,很多人感到困惑:有的号称AI,但只是帮你改改文案;有的则能通过对话直接生成整个网站。到底哪些才是真正适合你的?本篇指南将先帮你建立一套客观的筛选标准,再用对比表格拆解五种…...
基于STM32与ST7796S的4寸LCD-TFT屏SPI驱动优化实践
1. STM32与ST7796S的硬件基础解析 第一次接触STM32驱动TFT屏时,我对着密密麻麻的引脚定义图发呆了半小时。直到把ST7796S的数据手册翻到第37页,才真正理解这个4寸屏的运作机制。ST7796S这颗驱动芯片支持的最大分辨率是320x480,内置的345600字…...
Claude Code 不只是会写代码:这 10 个 Skills,才是效率分水岭
一个接口测通了,不代表 AI 功能能上线。 一个问答结果看起来没问题,也不代表这个版本真的可用。这两年,很多团队一边接入大模型,一边沿用原来的测试思路:提测、冒烟、回归、上线。流程看上去没变,但项目一落…...
