element-ui 对话框 el-dialog 多内容时显示对话框滚动条

最新推荐文章于 2026-04-13 09:27:10 发布

原创最新推荐文章于 2026-04-13 09:27:10 发布 · 6.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

php

当前文章被收录于：

php

20 篇文章 0 人学习

订阅专栏查看详情

vue

当前文章被收录于：

vue

6 篇文章 0 人学习

订阅专栏查看详情

UI框架

当前文章被收录于：

UI框架

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Element-UI的el-dialog组件中添加滚动条，通过设置CSS样式实现当对话框内容过多时自动显示垂直滚动条，确保内容完整显示。主要涉及到CSS的overflow、height和calc属性的使用。

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);
}

标签

#ui #elementui #vue

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陌家小白

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

m0_45272038的博客

08-03

2717

后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；

参与评论您还未登录，请先登录后发表或查看评论

vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变

意初的博客

03-02

2442

vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变

elementUI Dialog内容区域显示滚动条

爱米酱的博客

10-25

4894

【代码】elementUI Dialog内容区域显示滚动条。

Vue - 解决el-dialog引发的滚动条隐藏与双滚动条问题的实战指南

热门推荐

伍六七

07-24

3万+

例如在一个弹出框的表格添加滚动条  <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal=false> <div style="height:500px;" class="scr...

vue el-dialog 对话框居中显示

且听风吟的博客

08-28

3万+

el-dialog 貌似不设置样式的时候默认不居中显示，如下所示：个人感觉居中好看一点，就修改了样式： .el-dialog { display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; ...

Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动

weixin_44702139的博客

05-19

1万+

问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的80%，内容过多时在对话框内出现滚动条，具体代码如下：但是这样设置会造成高度不能根据内容自适应，始终是80% // 内容 <template> <el-dialog :title="title" :visible.sync="dialogVisible" class="showAll_dialog"

el-dialog内容大于高度时可滑动

weixin_44534057的博客

01-23

2008

el-dialog内容大于高度时可滑动

Element UI中el-dialog中内容超出自定义滚动条

卷发头的鲁智深的博客

03-13

1万+

dialog内容超出显示滚动条

修改element-ui Dialog对话框自适应高度仅body内容部分滚动

qq_42730111的博客

02-14

5647

用element-ui Dialog 对话框时遇到这样一个问题（如下图），就是打开Dialog对话框后，它的高度不是自适应高度，从而导致浏览器产生滚动条，用户体验不是很好，经过一番修改，改成自己想要的自适应高度弹框。定义样式如下： <style lang='scss'> /* 所属客户的input的按钮的颜色 */ .inputBox > .el-input-group__append { background-color: #5599ff; color: wh

彻底解决Element Plus多对话框嵌套时的滚动条冲突问题

gitblog_00322的博客

09-11

789

在企业级前端开发中，多对话框（Dialog）嵌套场景十分常见，例如表单弹窗内打开确认对话框、多层级信息展示等。但使用Element Plus开发时，开发者常遇到主页面滚动条被意外锁定、对话框内容滚动异常等问题。本文基于Element Plus源码实现，从问题根源出发，提供三种经过生产环境验证的解决方案。 ## 问题现象与影响范围当连续打开多个`el-dialog`组件时，会出现两类典型问题：...

element-ui对话框组件自定义内容超出显示滚动条

agua001的博客

10-19

6023

需求是内容高度固定了，文字过多的话自动显示滚动条 html: <el-dialog title="<<某某用户协议>>" :visible.sync="userDig" width="800px" custom-class="userDig" center> <div class="userAgree"> <span class="userAgree_txt"&gt.

关于element-ui的el-dialog页面不居中问题

龙小超的博客

09-28

4795

关于element-ui的el-dialog页面不居中问题

element ui使用滚动条组件el-scrollbar(官方没有)解决对话框el-dialog的滚动条问题

濮家大少

03-12

9452

今天写vue+element ui写项目时有个需求是要在对话框中进行操作，但是当对话框内容过多时却不会出现滚动条，通过修改样式后虽然出现滚动条，但是滚动条的样式不是很理想，通过查找发现了element ui官方没有的隐藏组件el-scrollbar(滚动条组件) <el-scrollbar style="height:300px;">//我在这里设置高度未300px ...... &...

el-dialog固定高度

q283614346的博客

09-14

1万+

el-dialog固定高度

element ui el-dialog 居中，并且内容多的时候内部可以滚动

沉睡的博客

12-24

1187

element ui el-dialog 居中，并且内容多的时候内部可以滚动 <el-dialog title="图标设置" :visible.sync="iconModal" custom-class="pub_dialog"> </el-dialog> css 放到公共css文件里，不能放到页面的style里 // dialog自定义 .pub_dialog {...

Vue - 解决el-dialog引发的滚动条隐藏与双滚动条问题的实战技巧

weixin_29011667的博客

03-12

181

本文深入剖析了Vue项目中el-dialog组件引发的窗口抖动与双滚动条问题。通过设置`:lock-scroll="false"`和`:append-to-body="true"`属性，并结合CSS Flexbox布局精准控制滚动容器，提供了根治这两个问题的实战技巧与进阶场景避坑指南。

element中dialog出现滚动条记录位置问题

qq2276031的博客

05-12

3678

element中dialog出现滚动条记录位置问题 //弹窗出现滚动条的时候滚动到最底下，下次在点开的时候还在最底下，可以通过以下方式解决 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false"