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键都可以进行查找,注意:= 左边的内容不能使用大写字母 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构05】排序

系列文章目录 【数据结构05】排序 . 【算法思想04】二分查找 文章目录 系列文章目录[toc] 1. 基本思想与实现1.1 插入类排序1.1.1 直接插入排序&#xff08;*&#xff09;1.1.2 折半插入排序1.1.3 希尔排序&#xff08;*&#xff09; 1.2 交换类排序1.2.1 冒泡排序&#xff08…

QT----------文件系统操作和文件读写

一、输入输出设备类 功能&#xff1a; Qt 提供了一系列的输入输出设备类&#xff0c;用于处理不同类型的 I/O 操作&#xff0c;如文件、网络等。 二、文件读写操作类 QFile 类&#xff1a; 提供了对文件的读写操作&#xff0c;可以打开、读取、写入和关闭文件。示例&#x…

Qt自定义步骤引导按钮

1. 步骤引导按钮 实际在开发项目过程中&#xff0c;由一些流程比较繁琐&#xff0c;为了给客户更好的交互体验&#xff0c;往往需要使用step1->step2这种引导对话框或者引导按钮来引导用户一步步进行设置&#xff1b;话不多说&#xff0c;先上效果 2. 实现原理 实现起来…

《Java核心技术II》流中的filter、map和flatMap方法

filter、map和flatMap方法 filter filter通过转换产生过滤后的新流,将字符串流转化为只包含长单词的另一个流。 List words ...; Stream longWords words.stream().filter(w->w.length()>12) filter类型是Predicate(谓词&#xff0c;表示动作)类型对象&#xff0c…

Junit4单元测试快速上手

文章目录 POM依赖引入业务层测试代码Web层测试代码生成测试类文件 在工作中我用的最多的单元测试框架是Junit4。通常在写DAO、Service、Web层代码的时候都会进行单元测试&#xff0c;方便后续编码&#xff0c;前端甩锅。 POM依赖引入 <dependency><groupId>org.spr…

FPGA自学之路:到底有多崎岖?

FPGA&#xff0c;即现场可编程门阵列&#xff0c;被誉为硬件世界的“瑞士军刀”&#xff0c;其灵活性和可编程性让无数开发者为之倾倒。但谈及FPGA的学习难度&#xff0c;不少人望而却步。那么&#xff0c;FPGA自学之路到底有多崎岖呢&#xff1f; 几座大山那么高&#xff1f;…

【Leecode】Leecode刷题之路第97天之交错字符串

题目出处 97-交错字符串-题目出处 题目描述 个人解法 思路&#xff1a; todo代码示例&#xff1a;&#xff08;Java&#xff09; todo复杂度分析 todo官方解法 97-交错字符串-官方解法 方法1&#xff1a;动态规划 思路&#xff1a; class Solution {public boolean isInte…

【微服务】【Sentinel】认识Sentinel

文章目录 1. 雪崩问题2. 解决方案3. 服务保护技术对比4. 安装 Sentinel4.1 启动控制台4.2 客户端接入控制台 参考资料: 1. 雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。动图演示&#xff1a; 在微服务系统…

使用 Three.js 创建几何体粒子效果

今天,带大家一起看下如何将几何体由粒子组成的效果。 通常情况下&#xff0c;Three.js 中的几何体材质会为每个面赋予一种颜色&#xff0c;这样的结果比较常见&#xff0c;如下图所示&#xff1a; 然而&#xff0c;通过将几何体由粒子组成&#xff0c;我们可以实现更加酷炫和…

shell指令

终端输入一个C源文件名&#xff08;.c结尾&#xff09;判断文件是否有内容&#xff0c;如果没有内容删除文件&#xff0c;如果有内容编译并执行改文件。 终端输入两个文件名&#xff0c;判断那个时间戳更新

使用ONVIF操纵大华摄像头

使用1台大华网络相机&#xff0c;DH-IPC-HFW3237M-I2&#xff0c;6毫米镜头&#xff0c;2百万像素&#xff0c;但是网口是百兆的。 大华的SDK感觉好难用。 写完了data matrix识别的0.1版本后&#xff0c;进行相机部分改进。 老规矩&#xff0c;先用python快速原型。 会出现一个…

Pandas-数据分组

文章目录 一. 分组聚合1. 分组聚合过程2. Pandas,Numpy内置的聚合方法3. 聚合函数① 使用Numpy库的mean函数② 自定义函数Ⅰ. 一个参数Ⅱ. 多个参数 ③ agg和 aggregateⅠ. 传入一个函数Ⅱ. 同时传入多个函数Ⅲ. 向agg/aggregate中传入字典 二. 分组转换1. 使用transform分组计…

云计算课程报告实验-WordCount算法实验 过程记录

内容描述 本实验指导书通过在华为鲲鹏上&#xff0c;编译运行WordCount程序。完成实验操作后&#xff0c;读者会掌握简单的程序编写&#xff0c;如WordCount中的getWords、countWords、treeMerge。 实验环境 华为鲲鹏云主机、openEuler 20.03操作系统&#xff1b;安装mpich-3…

【paddle】初次尝试

张量 张量是 paddlepaddle&#xff0c; torch&#xff0c; tensorflow 等 python 主流机器学习包中唯一通货变量&#xff0c;因此应当了解其基本的功能。 张量 paddle.Tensor 与 numpy.array 的转化 import paddle as paddle import matplotlib.pyplot as plt apaddle.to_t…

Frontend - 分页(针对 python / Django )

目录 一、同个文件内&#xff08;方式一&#xff09; 1. 前端 html 2. 定义分页界面 3. 获取分页数据 4.后端根据前端分页需求&#xff0c;整理分页数据 5.显示情况 6. JsonResponse 相关知识 二、不同文件内依旧有效&#xff08;方式二&#xff0c;更优化&#xff09;…

骑行解压:身心的奇妙之旅,VELO Angel Revo坐垫

在快节奏的都市生活中&#xff0c;骑行不仅是一种健康的生活方式&#xff0c;更是一种心灵的释放。从心理生理学的角度来看&#xff0c;骑行能够促使身体分泌内啡肽&#xff0c;带来愉悦感&#xff0c;同时&#xff0c;它还能转移注意力&#xff0c;缓解焦虑。在这场身心的奇妙…

HarmonyOS NEXT 实战之元服务:静态案例效果---教育培训服务

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; import { authentication } …

使用JMeter对Linux生产服务器进行压力测试

安装 JMeter wget https://downloads.apache.org/jmeter/binaries/apache-jmeter-5.4.1.tgz tar -xzf apache-jmeter-5.4.1.tgz cd apache-jmeter-5.4.1创建 JMeter 脚本 设置中文 选择Options—>Choose Language—>选择其他语言&#xff08;例如&#xff1a;Chinese&am…

【Web安全】文件写入漏洞 ASP 网页病毒模拟(文件写入漏洞+FilesystemObject)

【Web安全】文件写入漏洞 ASP 网页病毒模拟&#xff08;文件写入漏洞FilesystemObject&#xff09; 原理 文件写入漏洞 文件写入漏洞是指攻击者通过某种方式在服务器上创建或修改文件的漏洞。攻击者可以利用此漏洞在服务器上写入恶意代码或文件&#xff0c;从而实现进一步的…