el-input 使用 回车键会刷新页面的问题
2024-10-21 06:03:38
使用el-input的时候,光标聚焦在输入框,按下回车,会刷新页面。这是因为当el-form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 产生刷新页面的行为
解决办法
法一:
form表单内多增加一个元素,不占据位置即可
<el-form :model="form" ref="formRef" :inline="true" >
<el-form-item label="姓名" prop="name" >
<el-input v-model="form.name" placeholder="请输入品名" @keydown.enter="handleQuery" />
</el-form-item>
// form表单内多增加一个元素,不占据位置即可
<div></div>
</el-form>
法二:
如下代码,在 el-form 中 加个 @submit.native.prevent,就可以了,
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面
// 在 el-form 中 加个 @submit.native.prevent
<el-form :model="form" ref="formRef" :inline="true" @submit.native.prevent>
<el-form-item label="姓名" prop="name" >
<el-input v-model="form.name" placeholder="请输入品名" @keydown.enter="handleQuery" />
</el-form-item>
</el-form>
最新文章
- ios透明代理抓包
- BestCoder Round #73 (div.2)
- linux下批量修改文件名之rename
- 1-了解Python
- bzoj2653:middle
- 自定义窗口 mfc
- 40. leetcode 202. Happy Number
- selenium 封装
- 【Netty源码学习】ServerBootStrap
- 推荐多线程下载工具axel替代wget
- BZOJ 4820 [SDOI2017] 硬币游戏
- 【U3d】Tiled2Unity 使用Tips
- linux 查看nginx如何启动
- springcloud Eureka控制台参数说明
- js返回上一页并刷新、返回上一页、自动刷新页面
- Hive中如何快速的复制一张分区表(包括数据)
- 六、持久层框架(Hibernate)
- python学习笔记_week17
- .NET网址
- Java中线程安全的集合
热门文章
- 使用Springboot+redis+Vue实现秒杀的一个Demo
- [seaborn] seaborn学习笔记7-常用参数调整Adjustment of Common Parameters
- 用python爬取网络文章----滴天髓
- 基于 VScode 搭建 Matlab 运行环境
- BUG日记---SSM进行多表查询错误-----页面使用<;c:foreach>;错误
- djiango路由匹配、djiango路由层、反向解析、有名无名反向解析
- ElasticSearch分布式搜索引擎——从入门到精通
- 文盘Rust -- 给程序加个日志
- 接水问题(NOIP 2010 PJT2)
- .NET遍历二维数组-先行/先列哪个更快?