elementUI Dialog内容区域显示滚动条

未来@音律

已于 2022-10-25 16:43:21 修改

阅读量4.7k

点赞数 10

分类专栏：前端文章标签： elementui vue.js javascript

于 2022-10-25 16:42:37 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37050372/article/details/127516444

版权

前端专栏收录该内容

65 篇文章

订阅专栏

<el-dialog title="Dialog" class="roll-dialog"> </el-dialog>

.roll-dialog ::v-deep .el-dialog .el-dialog__body {
    padding: 3px 30px;
    overflow-y: scroll;
    height: 400px;
 }

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

未来@音律

关注关注

10
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

qq_40603125的博客

06-04

1837

【代码】Element UI中el-dialog中内容超出自定义滚动条。

elementUI对话框Dialog使用技巧

yinyinlee07的博客

07-16

3116

给对话框设置close事件，绑定resetFields()数据初始化方法。this.$options.data()方法重置组件Data()里的数据。resetFields()方法也可以将表单验证的效果清除。给对话框设置overflowauto;

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

Element-ui之ElScrollBar组件滚动条的使用方法

12-01

在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。使用的原因：原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition

element el-dialog 滚动条问题

m0_68716504的博客

09-02

1474

elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法。

vue3 + element-plus中el-dialog对话框滚动条回到顶部

最新发布

BillKu的博客

04-21

382

3、通过开发者工具追查到滚动条对应的标签及class=“el-overlay-dialog”4、设置属性 scrollTop = 0 或者执行方法 scrollTo(0, 0)2、使用 nextTick 等待 Dom 更新完毕。对话框滚动条回到顶部。1、需要对话框显示后。

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

陌小白的博客

11-10

6413

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

el-dialog中内容自定义滚动条

风水道人

10-20

1894

el-dialog中内容自定义滚动条

element-ui的el-dialog主体滚动

zms12345677的博客

10-17

629

【代码】element-ui的el-dialog主体滚动。

elementUI el-dialog 滚动条滚动到el-cascader标签显示

05-27

在滚动事件中，首先获取 el-cascader 组件的位置和高度信息，以及 el-dialog 组件的滚动位置和高度信息，然后根据这些信息判断 el-cascader 组件是否在当前可视区域内。如果 el-cascader 组件不在可视区域内，就手动...

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

3. 配合CSS Flexbox或Grid布局：如果Cascader的容器是响应式的，可以考虑使用Flexbox或Grid布局来更好地控制子元素的大小和排列，从而避免滚动条溢出。 4. 调整级联数据结构：检查级联数据是否过于庞大，是否可以...

el-dialog对话框加滚动条

01-04

### 实现带有滚动条效果的 `el-dialog` 为了使 `el-dialog` 对话框中的内容能够正常显示并支持滚动，可以采用多种方法来处理这个问题。 #### 方法一：局部或全局设置样式通过覆盖默认样式，在 `.el-dialog__body...

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...

Vue | Element UI Plus 完美解决el-dialog双滚动条、页面抖动问题

m0_59074557的博客

03-12

3081

(添加 :lock-scroll="false" 属性)（无效的话把冒号去掉试试）解决双滚动条问题：（无效的话去掉deep）

element Dialog添加滚动条

qq_41742961的博客

11-03

2399

<el-dialog :title="title" :visible.sync="dialogFormVisible" width="900px" v-if="deviceDialog"> <div :style="{height: scrollHeight}" style="overflow-y: auto;overflow-x:hidden" > <el-form :model="form" ref="form" :inline="true" l

element-ui—— el-dialog: 让中间出现滚动条

qq_43201350的博客

06-08

2328

/deep/ .el-dialog { height: 870px; } /deep/ .el-dialog__body { overflow-y: auto; height: 680px; }

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"

element弹框组件——滚动条“回家”指南

希望看完文章的你能够带着答案离开。

04-29

2803

element弹框组件——滚动条“回家”指南

使用element-ui的滚动条

Zing_ing的博客

07-26

4107

【代码】使用element-ui的滚动条。