el-dialog嵌套表单使用【回车】问题

最新推荐文章于 2024-07-01 15:01:54 发布
最新推荐文章于 2024-07-01 15:01:54 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： 成长的路 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shihezhengshz/article/details/120367709
版权

被提到这个bug的时候，我就是这种状态

讲道理，第一次遇到这么怪的事儿，幸好一个同事遇到过这问题，太怪了；

具体问题： 打开el-dialog嵌套表单，给el-input聚焦，然后回车，直接刷新页面

问题原因：我el-form里面只有一个el-input，具体为什么回车变成那样也不晓得了

解决方法，加个el-input，设置隐藏

以上~

 

 

 

 

 

shihezhengshz
关注
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
el-dialog内嵌表单项，使用enter键后页面直接刷新
m0_37755267的博客
07-13 973
el-dialog内嵌表单项，使用enter键后页面直接刷新
el-element中解决Dialog 对话框点击非内容区域关闭的问题
在无知中学习，在学习中成长，在成长中学习
07-14 931
el-element中解决Dialog 对话框点击非内容区域关闭的问题
Vue封装el-dialog+el表单组件
最新发布
z02sama的博客
07-01 166
【代码】Vue封装el-dialog+el表单组件。
eleemntui的输入框回车导致页面刷新弹框关闭
成长的博客
02-25 1054
一、问题描述 element的弹框里面放一个input，当一个form元素中只有一个输入框时，回车时会触发浏览器提交事件，导致页面刷新，弹框关闭 二、解决办法 <el-form @submit.native.prevent> 三、兼容方案 如果弹框里面的input正好想绑定回车事件，如果用的是elemetui的el-input，@keyup.enter.native="方法名" ...
el-dialog中的回车事件
weixin_45535843的博客
04-10 469
由于需求登录回车后需要弹出弹框输入谷歌验证码，于是有了回车事件不生效的问题。这个只存在于普通的页面当中，比如登录中的按钮。弹窗中的回车事件需要在dialog上加事件。
ElementUI+vue中点击el-dialog区域以外，会关闭对话框的解决办法。
aurora
12-24 5701
需求目标： 当用户点击修改、新增等按钮弹出el-dialog输入框时，除了点击el-dialog弹框内关闭按钮以外，不能让该弹框关闭。 方法一：（添加:close-on-click-modal="false"） <el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 方法二：（全局配置） 在mian.js
elementui的dialog点击右上角关闭按钮关闭dialog
wangaiwen的博客
03-08 3823
elementui的dialog点击右上角关闭按钮关闭dialog
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
element-ui弹框dialog无故关闭问题
xuanyuyao的博客
11-23 2219
dialog无故关闭问题
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_69811594的博客
03-17 5160
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
实现Vue按钮(button)绑定回车(enter)事件
daishu_shu的博客
01-04 8513
项目中有时候会有这样的需求，当用户点击某个功能对话框(比如：删除、解绑)后，当点击确定时，希望enter键就完成操作，用来代替鼠标点击。下面就向大家介绍我使用的方法在删除对话框的取消与确定按钮之间添加input输入框写个监听器，监听弹窗打开时，给input框自动聚焦（ inputdata 是 input 上用 ref 绑定的）隐藏input框。
dialog里屏蔽ESC和回车
weixin_33860722的博客
08-15 367
重载PreTranslateMessage，在return之前加一句判断，只要是按下ESC和回车的消息，就直接置之不理即可，代码如下： if( pMsg->message == WM_KEYDOWN && (pMsg->wParam==VK_ESCAPE || pMsg->wParam==VK_RETURN)) return TRUE; 转载于...
【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑
Note_creek的博客
02-26 2620
element组件el-dialog踩坑学习
ElementUI/ ElementUI PLUS el-dialog包含el-form查询时回车导致刷新整个页面问题
陈小白
04-25 818
只需要给表单添加一个@submit.native.prevent 提交拦截触发时间。
elementui dialog 回车时却刷新整个页面
carbonzhao的专栏
01-09 971
使用el-dialog弹出一个表单，当我无意间敲到回车键时，整个页面被刷新了，又是一脸的懵逼。到处都是坑，这个坑填完另一个坑还在等你。坑坑相连，坑坑不同。经过查找文档发现解决方案为上述截图标记。
ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
weixin_45496202的博客
05-11 6682
VUE中关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法 今天做项目时,在用到element中的MessageBox弹窗组件的时候,同事提出了一个需求,要求取消按回车默认触发确定按钮的点击事件,理由是删除操作的时候点快了可能会误删… 于是我就开始各种在网上查找资料,终于让我找到一位大佬提供的解决方法, 建议先阅读完这篇文章,再来观阅 我按照以上这位大佬提供的方法,确实成功的解决了回车触发事件问题,但是我发现又出了一个新问题,鼠标第一次点击
el-dialog嵌套dialog时层级问题
08-25
el-dialog嵌套dialog时层级问题是指在使用element-ui的el-dialog组件时，当在一个dialog中再次嵌套一个dialog时，内层dialog可能会被外层dialog或遮罩层所遮挡。在官方的解释中，他们提到了两种解决方法。 第一种方法是将内层dialog的插入位置改为body上而不是插入到外层dialog中，并且确保内层dialog的层级比遮罩层高，这样就能避免被遮挡的问题。 而第二种方法是将内层dialog与外层dialog同级显示，这样也可以避免被遮挡的问题，并且对整体的影响更小。 如果想要查看内层dialog和遮罩层的层级情况，可以打开控制台，通过查看它们在DOM中的位置来确定它们的层级关系。 总结起来，解决el-dialog嵌套dialog时层级问题的方法有两种：一是将内层dialog插入到body上并设置合适的层级，二是将内层dialog与外层dialog同级显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [el-dialog嵌套的影响、原因及解决方法](https://blog.csdn.net/weixin_42322454/article/details/117418976)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值