element Dialog添加滚动条

最新推荐文章于 2024-09-02 16:03:09 发布

Zero0985

最新推荐文章于 2024-09-02 16:03:09 发布

阅读量2.3k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_41742961/article/details/121118462

版权

本文主要介绍如何在Element UI的Dialog组件中添加滚动条，解决内容过多时显示不全的问题。通过CSS样式调整及JavaScript操作，实现Dialog内的滚动效果，确保长内容可以流畅浏览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-dialog :title="title" :visible.sync="dialogFormVisible" width="900px" v-if="deviceDialog">
     <div :style="{height: scrollHeight}" style

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zero0985

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3-el-dialog界面太长，快捷回到顶部、底部，增加按钮

weixin_53621870的博客

04-02

286

首先在最外层绑定id。

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

qq_40603125的博客

06-04

1821

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

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

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-ui 添加滚动条

最新发布

m0_71775808的博客

09-02

1075

el-dialog对话框内容太多，超出可视屏幕高度，添加滚动条实现滚动操作

el-dialog窗口添加滚动条

Gpointy的博客

09-15

1882

【代码】el-dialog窗口添加滚动条。

el-dialog添加滚动条

树上骑个猴的博客

07-01

1万+

<el-dialog :visible.sync="specDlgVisible" class="spec-dialog"> <style lang="scss"> .spec-dialog .el-dialog__body { padding: 3px 30px; overflow-y: auto; height: calc(100vh - 140px); }

vue element在dialog添加滚动条

05-27

要在 Vue Element 的 Dialog 中添加滚动条，你可以使用 `el-dialog` 组件的 `body-style` 属性，并设置 `overflow-y: auto` 样式，示例代码如下： ```html <el-dialog title="Dialog Title" :visible=...

vue element el-dialog 添加滚动效果

05-27

要在 Vue Element 中的 el-dialog 中添加滚动效果，可以在弹框的内容区域使用自定义的样式来实现。具体的实现步骤如下： 1. 在弹框的内容区域中添加一个容器元素，例如使用 div 元素，并设置其样式为： ``` ....

el-dialog怎么添加内部滚动条,自己位置不随内容改变

cdfdfgrd的博客

04-29

1030

el-dialog怎么添加内部滚动条,自己位置不随内容改变

vue中给el-dialog添加滚动条

weixin_44281416的博客

10-12

1万+

页面代码 <el-scrollbar style="height:700px;"> <el-dialog></el-dialog>//此处为dialog的代码 </el-scrollbar> css代码 .el-scrollbar__wrap { overflow-x: hidden!important; }

elementUI Dialog内容区域显示滚动条

爱米酱的博客

10-25

4739

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

el-dialog的body中设置滚动条

梁白开的博客

11-21

4484

el-dialog的body中设置滚动条

el-dialog设置滚动条

anwenagululu的博客

10-30

732

【代码】el-dialog设置滚动条。

element el-dialog 滚动条问题

m0_68716504的博客

09-02

1471

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

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

风水道人

10-20

1894

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

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

陌小白的博客

11-10

6410

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

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

q122214的博客

02-17

3651

今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。网上找了两种方法都不太管用，最后在同事的帮助下解决了。使用element-ui，dialog中的destroy-on-close属性，关闭时销毁 Dialog 中的...