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

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取消回车默认提交

问题描述&#xff1a;在表单el-form中的el-input中按回车后&#xff0c;页面会刷新&#xff0c;url也会改变&#xff0c; 回车前&#xff1a; 回车后&#xff1a; 相关代码&#xff1a; 解决方法1&#xff1a;在 el-form 上阻止默认的 submit 事件&#xff0c;增加 submit.pre…...

Web Services 简介

Web Services 简介 1. 引言 Web Services 是一种基于网络的软件服务,它允许不同的应用程序在互联网上相互通信和交互。这种技术是基于开放的互联网标准,如HTTP、XML、SOAP和WSDL,使得不同平台和编程语言的应用程序能够轻松地实现互操作性。Web Services 的出现,极大地推动…...

Vue3苦逼的学习之路

从一名测试转战到全栈是否可以自学做到&#xff0c;很多朋友肯定会说不可能&#xff0c;或就算转了也是个一般水平&#xff0c;我很认同&#xff0c;毕竟没有经过各种项目的摧残&#xff0c;但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容&#xff0c;大佬勿…...

AcWing练习题:两点间的距离

给定两个点 P1 和 P2&#xff0c;其中 P1P1 的坐标为 (x1,y1)&#xff0c;P2 的坐标为 (x2,y2)&#xff0c;请你计算两点间的距离是多少。 distance√(x2−x1)^2(y2−y1)^2 输入格式 输入共两行&#xff0c;每行包含两个双精度浮点数 xi,yi&#xff0c;表示其中一个点的坐标…...

文献分享: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故事可视化 通过知识增强的角色定制技术&#xff0c;实现高质量的故事可视化论文链接:https://arxiv.org/pdf/2412.07375项目仓库:https://github.com/Aria-Zhangjl/StoryWeaver由厦门大学多媒体可信感知与高效计算教育部重点实验室和网易伏…...

【机器学习篇】从新手探寻到算法初窥:数据智慧的开启之门

文章目录 【机器学习篇】从新手探寻到算法初窥&#xff1a;数据智慧的开启之门前言一、什么是机器学习&#xff1f;二、机器学习的基本类型1. 监督学习&#xff08;Supervised Learning&#xff09;2. 无监督学习&#xff08;Unsupervised Learning&#xff09;3. 半监督学习&a…...

ffmpeg八大开发库

‌FFmpeg八大库‌是指FFmpeg项目中最重要的八个库&#xff0c;它们各自承担不同的功能&#xff0c;共同构成了FFmpeg的强大功能。以下是这八大库的详细介绍&#xff1a; ‌libavcodec‌&#xff1a;负责音频和视频的编解码。它支持多种编解码器&#xff0c;如H.264、AAC、MP3、…...

【ArcGISPro/GeoScenePro】解决常见的空间参考和投影问题

修复空间参考缺失的图像 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 查看属性坐标 查看属性范围 范围值并不是零或接近于零。 这意味着栅格具有范围,因此其已正确进行...

Linux上安装配置单节点zookeeper

直接先去官网下载安装包&#xff0c; https://downloads.apache.org/zookeeper/ 选择合适的版本&#xff0c;然后上传至服务器 解压&#xff1a; tar -zxvf apache-zookeeper-3.9.3-bin.tar.gz创建data和logs目录 mkdir data mkdir logs配置环境变量&#xff1a; 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 (偏置) 如何设置参数&#xff1f;1. **in_channels 和 out_channels&#xff08;输入…...

T-SQL语言的正则表达式

T-SQL语言的正则表达式 在现代数据库管理系统中&#xff0c;SQL&#xff08;结构化查询语言&#xff09;被广泛用于数据的操作与管理。对数据的查询、插入、更新和删除几乎是每一个数据库管理系统中的基本功能。T-SQL&#xff08;Transact-SQL&#xff09;是微软对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 协议中&#xff0c;用 “源IP”&#xff0c; “源端口号”…...

Python 中常见的数据结构之二推导式

Python 中常见的数据结构之二推导式 使用推异式列表推导式字典推导式集合推导式 使用推异式 推导式是一种从已存在的序列中快速构建列表(list)、集合(set) 和 字典(dictionary)方式。Python 支持 3 种不同类型的推导式&#xff1a; 列表推导式&#xff1b;字典推导式&#xf…...

STM32 拓展 低功耗案例3:待机模式 (hal)

配置PA0的两种方式&#xff1a; 第一种 第二种 复制寄存器代码然后对其进行修改 mian.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body…...

【开源社区openEuler实践】探索 Yocto-Meta-OpenEuler:嵌入式开发的强大基石

title: 探索 Yocto-Meta-OpenEuler&#xff1a;嵌入式开发的强大基石 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. 内存管理及优化 时间复杂度理想情况&#xff08;无哈希冲突或冲突极少&#xff09;一般情况&#xff08;考虑哈希冲突及解决方法&#xff09;综合来看 以…...

JS (node) 的 ACM 模式 + debug方法 (01背包为例)

文章目录 JS 的 ACM 模式输入处理 JS dubug (01背包为例)动态输入在本地通过 Node.js 运行和调试 硬编码 Hard CodingVS Code JS 的 ACM 模式 在 JavaScript 中&#xff0c;ACM 模式一般通过 Node.js 的 readline 模块实现。 输入处理 使用 readline 模块监听输入。 将每行输…...

vue设计与实现-框架设计

权衡的艺术 命令式和声明式 视图层框架通常分为命令式和声明式&#xff0c;各有优缺。jquery是一种命令式框架。命令式框架关注过程&#xff0c;而声明式框架关注结果。对于vue来说&#xff0c;过程被vue封装了&#xff0c;所以vue内部是命令式的&#xff0c;但vue暴露给用户…...

当LLM开始起草交战规则:AI生成战术指令的合法性断层(附联合国《自主武器系统审查框架》中英文对照关键条款)

第一章&#xff1a;AGI与军事应用的伦理边界 2026奇点智能技术大会(https://ml-summit.org) 人工智能发展正逼近通用人工智能&#xff08;AGI&#xff09;临界点&#xff0c;其在军事领域的潜在部署已引发全球性伦理关切。当系统具备跨域推理、自主目标重构与实时战略演化能力…...

BepInEx:解锁Unity游戏无限可能的模组框架

BepInEx&#xff1a;解锁Unity游戏无限可能的模组框架 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 你是否曾经玩过一款Unity游戏&#xff0c;觉得某些功能不够完善&#xff0c;…...

避坑指南:PyTorch中ReflectionPad2d和ReplicationPad2d用错了?详解两者区别与适用场景

PyTorch边界填充终极指南&#xff1a;ReflectionPad2d与ReplicationPad2d的深度抉择 在图像处理任务中&#xff0c;边界填充&#xff08;Padding&#xff09;是一个看似简单却影响深远的关键操作。许多开发者在实现卷积神经网络时&#xff0c;往往只关注模型架构和损失函数的设…...

深入VS编译后台:从cl.exe到link.exe,一次C++代码的完整‘旅程’都发生了什么?

深入VS编译后台&#xff1a;从cl.exe到link.exe&#xff0c;一次C代码的完整‘旅程’都发生了什么&#xff1f; 当你在Visual Studio中点击"生成"按钮时&#xff0c;背后其实隐藏着一系列精密的工序。这就像把一块原石雕琢成精美的艺术品&#xff0c;需要经过多道工序…...

如何用Python脚本快速搞定京东抢购:2025终极指南

如何用Python脚本快速搞定京东抢购&#xff1a;2025终极指南 【免费下载链接】JDspyder 京东预约&抢购脚本&#xff0c;可以自定义商品链接 项目地址: https://gitcode.com/gh_mirrors/jd/JDspyder 还在为抢不到心仪的京东商品而烦恼吗&#xff1f;无论是限量茅台、…...

你的老Mac还能再战十年吗?OpenCore Legacy Patcher让旧设备焕发新生

你的老Mac还能再战十年吗&#xff1f;OpenCore Legacy Patcher让旧设备焕发新生 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否还在为老款Mac无法升级…...

终极Windows驱动清理指南:DriverStore Explorer轻松释放磁盘空间

终极Windows驱动清理指南&#xff1a;DriverStore Explorer轻松释放磁盘空间 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你是否曾因Windows系统运行缓慢而烦恼&#xff1f;是否发现…...

GLM-4V-9B新手避坑指南:环境配置与模型加载的注意事项

GLM-4V-9B新手避坑指南&#xff1a;环境配置与模型加载的注意事项 1. 环境准备与硬件要求 1.1 硬件配置建议 GLM-4V-9B作为90亿参数的多模态模型&#xff0c;对硬件资源有特定要求&#xff1a; 显存需求&#xff1a; FP16精度&#xff1a;至少需要18GB显存INT4量化&#xff…...

JavaScript Navigator 对象怎么用?

Window Navigator 对象 JavaScript 中的 navigator 对象用于访问用户浏览器的信息。使用 navigator 对象&#xff0c;你可以获取浏览器版本和名称&#xff0c;并检查浏览器中是否启用了 cookie。 navigator 对象是 window 对象的一个属性。通过只读的 window.navigator 属性可…...

PyTorch 2.8镜像多场景落地:支持单卡训练(RTX 4090D)、多卡扩展(NCCL配置)

PyTorch 2.8镜像多场景落地&#xff1a;支持单卡训练&#xff08;RTX 4090D&#xff09;、多卡扩展&#xff08;NCCL配置&#xff09; 1. 镜像概述与核心优势 PyTorch 2.8深度学习镜像为RTX 4090D显卡深度优化的通用训练/推理环境&#xff0c;基于CUDA 12.4和驱动550.90.07构…...