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
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
weixin_39521068的博客
12-20 1390
几乎在所有浏览器中，都具有 Tab 键切换焦点的功能。但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能。为了交付上线拿到钱，我们只好再一次毫无原则性的接受了客户的需求。在上一代人中，大多都有这种操作习惯。习惯把保存成为编辑，习惯用回车替换 Tab。这是受到微软 excel 荼毒的结果。起初我以为这个功能很简单，无非就是把 Enter 键的功能转接到 Tab 键上面，分分钟就可以解决掉的...
Element-ui关于对话框中表单自动获取焦点的实现
love_dzq的博客
01-10 5076
this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势，是解决这次问题的关键。
el-dialog内嵌表单项，使用enter键后页面直接刷新
m0_37755267的博客
07-13 957
el-dialog内嵌表单项，使用enter键后页面直接刷新
Vue封装el-dialog+el表单组件
最新发布
z02sama的博客
07-01 149
【代码】Vue封装el-dialog+el表单组件。
el-dialog中的回车事件
weixin_45535843的博客
04-10 438
由于需求登录回车后需要弹出弹框输入谷歌验证码，于是有了回车事件不生效的问题。这个只存在于普通的页面当中，比如登录中的按钮。弹窗中的回车事件需要在dialog上加事件。
ElementUI el-dialog包含el-form查询时回车导致刷新整个页面问题
LEON_RAY
12-28 1309
view-design 查询表单只有一个Input框回车导致刷新整个页面，路由后出现?。也是这个问题。
ElementUI/ ElementUI PLUS el-dialog包含el-form查询时回车导致刷新整个页面问题
陈小白
04-25 811
只需要给表单添加一个@submit.native.prevent 提交拦截触发时间。
在Dialog中button与回车键
weixin_34245082的博客
06-03 431
  1，  如果该Dialog中，某个button拥有focus，则敲回车键时会响应该按钮； 注：button拥有focus的方法： （a）使用Tab键切换到某按钮； （b）在建立Dialog时设定Tab Order，把某一button的tab顺序设为1，则该Dialog初始时，这个button拥有focus；（打开资源(.rc)文件，可以发现得到焦点的按钮总是在最前面） （c）...
vue+elementUI el-form 查询导致页面刷新
qq_29236119的博客
03-10 823
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
组件element------form组件（2），Switch 开关-----Form 表单
weixin_45343884的博客
08-08 3059
（7）Switch 开关 基本用法—绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> &l...
element组件---Form
weixin_45343878的博客
08-07 1025
Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
eleemntui的输入框回车导致页面刷新弹框关闭
成长的博客
02-25 1041
一、问题描述 element的弹框里面放一个input，当一个form元素中只有一个输入框时，回车时会触发浏览器提交事件，导致页面刷新，弹框关闭 二、解决办法 <el-form @submit.native.prevent> 三、兼容方案 如果弹框里面的input正好想绑定回车事件，如果用的是elemetui的el-input，@keyup.enter.native="方法名" ...
dialog里屏蔽ESC和回车
weixin_33860722的博客
08-15 365
重载PreTranslateMessage，在return之前加一句判断，只要是按下ESC和回车的消息，就直接置之不理即可，代码如下： if( pMsg->message == WM_KEYDOWN && (pMsg->wParam==VK_ESCAPE || pMsg->wParam==VK_RETURN)) return TRUE; 转载于...
ElementUI+vue中点击el-dialog区域以外，会关闭对话框的解决办法。
aurora
12-24 5686
需求目标： 当用户点击修改、新增等按钮弹出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
vue中使用element-ui的el-input监听不了回车事件？？？
1234567~~
02-26 968
在vue中，直接给input绑定回车事件，直接这么写：&lt;input type="text" placeholder="请输入昵称" v-model="search" @keyup.13="searchKeyword"&gt;但是使用el-input,像下面这样写，会发现不起作用：&lt;el-input v-model="queryKeyword" @keyup.13=&quot
el-element中解决Dialog 对话框点击非内容区域关闭的问题
在无知中学习，在学习中成长，在成长中学习
07-14 924
el-element中解决Dialog 对话框点击非内容区域关闭的问题
dialog屏蔽回退键
xiejunna的博客
06-08 3550
1、如果只想阻止“返回键”关闭Dialog最简单的setCancelable(false)       2、最简单的方法重载Activity的OnKeyDown()方法，捕捉想要屏蔽的按键：       public boolean onKeyDown(int keyCode, KeyEvent event) {   // TODO Auto-generated method s
elementui dialog 回车时却刷新整个页面
carbonzhao的专栏
01-09 943
使用el-dialog弹出一个表单，当我无意间敲到回车键时，整个页面被刷新了，又是一脸的懵逼。到处都是坑，这个坑填完另一个坑还在等你。坑坑相连，坑坑不同。经过查找文档发现解决方案为上述截图标记。
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、付费专栏及课程。

余额充值