使用ElementUI的Dialog弹窗时底部页面滚动问题

最新推荐文章于 2024-09-02 11:16:07 发布
最新推荐文章于 2024-09-02 11:16:07 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： Vue html&css 文章标签： elementui 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46709512/article/details/123276149
版权

使用ElementUI的Dialog弹窗时底部页面滚动问题

在这里插入图片描述
使用element-ui组件中的dialog弹窗时：打开dialog页页面侧边出现了滚动条，并且可以滚动底部页面
解决：public/index.html中添加如下代码在这里插入图片描述

elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3541
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
Vue elementUI dialog 动画效果+应用场景
sunshineTing2的博客
07-02 5226
前言 因为element-ui dialog本身的动画效果基本就是没动画效果,所以需要另外设置(下面会讲到) 应用场景描述 一、场景一 1.在第一屏, 机器人图标左右摆放,absolute定位 2.左侧按钮, 弹框定位在左侧; 右侧按钮,弹框定位在右侧. 代码实现 ::v-deep.el-dialog.robotEva{ margin-right: 50px; // 右侧弹框 } ::v-deep.el-dialog.robotWalle{ margin-left: 50px; //
使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题
riluokk的博客
05-25 5539
问题： 在使用element-ui的el-dialog时，由于遮罩层的出现，导致页面的滚动条隐藏，从而使页面出现闪动的效果。 解决过程 当遇到这个问题时，我想能不能是滚动条悬浮于页面上，及脱离文本流，从而不影响页面的宽度，于是我百度时发现了这个css属性，及在body或者盒子上添加 body:{ overflow:overlay } 这个可以使页面滚动条的隐藏和显示影响页面的宽度，但是这个问题存在兼容性问题，且是一个被‘废弃’的属性，于是我就放弃了这个想法。 于是我继续翻看element-ui的文档，发
element el-dialog 滚动条问题
最新发布
m0_68716504的博客
09-02 893
elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法。
解决el-dialog弹框出现后页面滚动条可滚动问题
weixin_43923808的博客
05-16 1439
在methods方法里写。
element-ui 添加滚动条
热门推荐
伍六七
07-24 3万+
例如 在一个弹出框的表格添加滚动条 <!-- 弹出框 --> <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal=false> <div style="height:500px;" class="scr...
【Element-ui - dialog导致滚动条显示和隐藏造成的页面窜动】
weixin_47416539的博客
07-27 644
【代码】【Element-ui - dialog导致滚动条显示和隐藏造成的页面窜动】
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
李墨瞳的博客
12-10 3537
vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能
element-ui dialog 如何设置动态高度 / 嵌套html
Sicily_winner的博客
11-09 7420
我们可以从官方的文档中得到，只有width的设置，那么如何动态设置height呢？ 代码部分： 在这里已经设置了width为90%，设置ref=“tk”，弹框不要放到created里面，可以放在编辑的read方法。否则会undefined； 同时要注意的是和顶部浏览器的距离(top=“2vh”)，这个可以根据自己的屏幕大小调整，建议在2-5之间，如果你当前页面是一个很大的滚动屏，弹框没有设置top高度，会导致其top为默认高度，使得弹框(tk)需要滚动才能显示完全。 // 设置屏幕高度90..
使用elementUI的tree实现省市区街小区的选择
学习笔记
12-28 1502
具体需求： 支持按层级选择一个/多个小区 层级懒加载 选中非小区节点时默认选中该节点范围下的所有小区 支持按列表选择一个/多个小区 列表懒加载 “全部小区”选项和树/列表中的选项互斥 按树结构和按列表结构选中的小区是同步更新的 记忆节点选中状态 支持搜索，可以在搜索出来的列表中进行选中/取消选中操作 效果如图： 设计思路： 用一个变量a来存放真实选中的小区信息，树/列表只做展示用 树的懒加载：展开节点时再加载下一层信息 列表的懒加载：先加载50个小区，滚动到底部时再加载下一批小区，虚拟分页 树的节
element-ui dialog弹出对话框之前增加规则校验
zidieyaonv的博客
08-05 1598
最近在项目开发中用到了element-ui 的dialog对话框，需要在弹出对话框前对页面信息进行校验，只有通过校验才能弹出，否则返回提示信息的需求，实现方法有很多，在此记录下我的实现办法。 element-ui dialog 官方示例如下： <el-button type="text" @click="centerDialogVisible = true">打开 Dialog</el-button> <el-dialog title="提示" :visible
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
elementUI Dialog内容区域显示滚动条
爱米酱的博客
10-25 4655
【代码】elementUI Dialog内容区域显示滚动条。
element-ui 对话框 el-dialog 多内容时显示对话框滚动条
陌小白的博客
11-10 6246
element-ui 对话框 el-dialog 多内容时显示对话框滚动条 <el-dialog :visible.sync="dialogTableVisible" class="roll-dialog"> </el-dialog> .roll-dialog .el-dialog__body { padding: 3px 30px; overflow-y: auto; height: calc(100vh - 140px); } ...
记一次包含iframe的需要滚动的元素不能滚动到底部的问题
weixin_34071713的博客
09-19 739
一个包含上头部、下部模块（包含左右两边模块：侧边栏、内容区域）的页面 前提条件，内容区域： 1、元素高度需要自适应屏幕高度 2、里面内容足够长时，可以滚动 3、包含了一个iframe嵌入的内容很长的页面 问题： 不要滚动内容区域时出现双滚动条 解决方案： 1、内容高度设置为body的高度-头部高度 滚动内容区域还是出现了滚动条，说明内容的高度设置的高了。重新...
elementui-plus el-dialog弹出时body有滚动条，修改了body样式
u014220146的博客
08-30 3690
使用组件el-dialog弹窗，写在二级组件中。
使用element-ui的滚动条
Zing_ing的博客
07-26 3356
【代码】使用element-ui的滚动条。
vue使用element dialog弹窗时，在弹窗底部添加文字内容
05-27
可以在el-dialog组件中添加一个具有固定高度的div元素，然后在该div元素内部添加文字内容。例如： ...<el-dialog ...然后使用CSS样式对该div元素进行布局，使其位于el-dialog底部，并且具有固定高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值