vue el-input 使用 回车键会刷新页面的问题

场景:
vue项目中 在输入框输入字符并按下回车键搜索时,不会进行搜索, 而是会刷新页面

原因:
当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 产生刷新页面的行为

解决:

在 el-form 中 加个 @submit.native.prevent,就可以了,

 

 <el-form ref="form" :model="form" :rules="rules" label-width="80px" @submit.native.prevent><el-form-item label="名称" prop="catalogueName"><el-inputv-model.trim="form.catalogueName"clearablemaxlength="11"placeholder="请输入名称"show-word-limit/></el-form-item></el-form>

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

问题聚集度Hive SQL

问题聚集度&#xff1a;最小的分母占比&#xff0c;贡献最多的分子占比&#xff0c;即小规模贡献大问题。 selectcity_name,user_id,rf_type,deal_ord_cnt,sale_amt,rf_ord_cnt,rf_amt,rf_ra,rf_amt_ra,rf_all,ord_cnt_all,rf_gx,ord_cnt_gx,del_gx,row_number() over(partiti…

Spring 事务详解(注解方式)

目 录 序言 1、编程式事务 2、配置声明式事务 2.1 基于TransactionProxyFactoryBean的方式&#xff08;不常用&#xff0c;因为要为每一个类配置TransactionProxyFactoryBean&#xff09; 2.2 基于AspectJ的XML方式&#xff08;常用&#xff0c;可配置在某些类下的所有子…

docker: CMD和ENTRYPOINT的区别

ENTRYPOINT&#xff1a; 容器的执行命令&#xff08;属于正统命令&#xff09; 可以使用--build-arg ENVIROMENTintegration参数覆盖 ocker build --build-arg ENVIROMENTintegration 两者同时存在时 CMD作为ENTRYPOINT的默认参数使用外部提供参数会覆盖CMD提供的参数。 CMD单…

无涯教程-Perl - unless...else 语句函数

Perl 除非语句后可以跟可选的 else 语句&#xff0c;该语句在布尔表达式为true时执行。 unless...else - 语法 Perl编程语言中的unless... else 语句的语法为- unless(boolean_expression) {# statement(s) will execute if the given condition is false } else {# stateme…

编程导航算法村第八关 | 树的深度优先遍历

编程导航算法村第八关 | 树的深度优先遍历 判断两棵树是否相同 LeetCode100&#xff1a;给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。思路&…

Go重写Redis中间件 - Go实现Redis持久化

GO实现Redis持久化 项目开发到这里,我们的下一步就是实现Redis的持久化落盘功能,Redis是一个内存型的数据库,在之前我们实现的单机版Redis如果把进程杀掉,我们通过GET、SET指令存储的数据都将不复存在,数据只存在内存的map里面,重启之后什么都没有了 我们现在的目标就是…

Net Core Webapi 使用Redis实现连续登录失败N次 锁定账号N分钟

由于最近项目发现有尝试密码登录的操作&#xff0c;需要设置密码复杂度及账号多次登录失败&#xff0c;将账号锁定N分钟后&#xff0c;才可以继续登录操作。 开始思路是使用登录记录数据处理连续登录失败的问题&#xff0c;如果频繁请求可能会导致数据库查询变慢&#xff0c;影…

322. 零钱兑换

322. 零钱兑换 原题链接&#xff1a;完成情况&#xff1a;一开始错误原因 解题思路&#xff1a;参考代码&#xff1a;__322 零钱兑换__错误思路还得是dp去做 原题链接&#xff1a; 零钱兑换 完成情况&#xff1a; 一开始错误 原因 /*解题思路&#xff1a;1.先sort一下coins…

python列表处理方法

原始文件&#xff1a; id start end a1 10 19 a1 25 34 a2 89 124 a2 149 167 a2 188 221目的文件&#xff1a; a1 1 10 a1 16 25 a2 1 36 a2 61 79 a2 100 133解释说明&#xff1a; 原始文件是gff3文件的一部分&#xff0c;第一列id是基因的名字&#xff0c;第二列和第三列分…

chatGPT在软件测试中应用方式有哪些?

ChatGPT可以在软件测试中以以下方式应用&#xff1a; 1. 自动化对话测试&#xff1a;ChatGPT可以用于自动化对话测试&#xff0c;模拟用户与软件系统进行实时对话。它可以扮演用户的角色&#xff0c;向系统发送各种类型的指令和请求&#xff0c;并验证系统的响应是否符合预期。…

react ant icon的简单使用

refer: 快速上手 - Ant Design 1.引入ant npm install antd --save 2.在页面引用&#xff1a; import { StarOutlined } from ant-design/icons; 如果想要引入多个icon&#xff0c;可以这样书写&#xff1a; import { UserOutlined, MailOutlined, PieChartOutlined } fr…

2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议&#xff08;IARCE 2023&#xff09; 会议时间&#xff1a;2023年10月27 -30日 召开地点&#xff1a;中国成都 大会官网&#xff1a;www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…

SocialFi 的开发中如何利用 NFTScan API 获取 NFT 数据

SocialFi 作为社交媒体与 Web3 的创新融合&#xff0c;致力于构建更加开放去中心化的社交平台。它赋能用户拥有数据控制权、实现内容价值&#xff0c;并通过代币经济建立起激励与治理机制&#xff0c;这正是 Web3 社交的独特魅力所在。SocialFi 为我们描绘了一个更加用户驱动、…

数据安全能力框架模型-详细解读(三)

数据安全能力框架内涵 “奇安信数据安全能力框架”体现了数据安全治理从组织机构安全治理&#xff0c;到数字化环境具体管控、分析能力分层逐步落实的工程方法。 它以企业数据安全的战略目标和风险容忍度为输入&#xff0c;明确数据安全治理的组织&#xff1b;以合规与治理需…

AtcoderABC227场

A - Last CardA - Last Card 题目大意 一共 K 张卡片分发给 N 个人&#xff0c;这些人的编号为 1, 2, …, N 从第 A 个人开始&#xff0c;按照顺序依次将卡片发给以下人员&#xff1a;A, A1, A2, …, N, 1, 2, …问最后一个卡片将发给哪个人&#xff1f; 具体来说&#xff0c;…

《向量数据库指南》——腾讯云向量数据库Tencent Cloud VectorDB关键概念

目录 向量(Vector) OLAMA 实例(Instance) 数据库(Database) 集合(Collection) 文档(Document) 字段(Field) 节点(Node) 分片(Shard) 副本(Replica)

uniapp自定义头部导航栏

有时我们需要一些特殊的头部导航栏页面&#xff0c;取消传统的导航栏&#xff0c;来增加页面的美观度。 下面我就教大家如何配置&#xff1a; 一、效果图 二、实现 首先在uniapp中打开pages.json配置文件&#xff0c;在单个路由配置style里面设置导航栏样式​​​​​​nav…

篇四:建造者模式:逐步构造复杂对象

篇四&#xff1a;“建造者模式&#xff1a;逐步构造复杂对象” 设计模式是软件开发中的重要组成部分&#xff0c;建造者模式是创建型设计模式中的一种。建造者模式旨在逐步构造复杂对象&#xff0c;将对象的构造与其表示分离&#xff0c;从而使得同样的构建过程可以创建不同的…

rust怎么生成随机数?

关注我&#xff0c;学习Rust不迷路&#xff01;&#xff01; 在 Rust 中&#xff0c;有几种不同的方法可以实现随机数生成。以下是其中几种常见的方法&#xff0c;以及它们的优缺点&#xff1a; 1. 使用 rand crate&#xff1a; 优点&#xff1a; rand crate 是 Rust 中最常…

【网络基础实战之路】基于MGRE多点协议的实战详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 PS&#xff1a;本要求基于…