el-dialog对话框添加滚动条

于 2024-09-02 16:03:09 发布
阅读量507 收藏
点赞数 3
文章标签： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71775808/article/details/141822090
版权

在对话框内部使用一个div元素，设置合适的屏幕高度，然后使用el-scrollbar组件，包裹需要滚动的对话框内容，如form表单，再设置表单的宽度，避免遮挡滚动条，这样就做好啦！！！

m0_cai
关注
element Dialog添加滚动条
qq_41742961的博客
11-03 2327
<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
[问题记录]ElementPlus的嵌套弹窗el-dialog_黑色背景
weixin_45039579的博客
04-05 3279
项目场景： 项目由Nuxt1.0+elementUI重构为vue3+ts+elementplus，其中问题发生在嵌套弹窗显示具体信息。 问题描述 外层弹窗提供事件的创建时间和查看按钮，然后内层弹窗展示具体的事件内容，具体如图所示 其中嵌套弹窗部分代码如下 <template> <el-dialog v-model="dialogHistory" title="历史记录" width="20%" > <p><st
el-dialog窗口添加滚动条
Gpointy的博客
09-15 1745
【代码】el-dialog窗口添加滚动条。
el-dialog的body中设置滚动条
梁白开的博客
11-21 4338
el-dialog的body中设置滚动条
element el-dialog 滚动条问题
最新发布
m0_68716504的博客
09-02 869
elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法。
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...
el-dialog添加滚动条
树上骑个猴的博客
07-01 9766
<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); }
el-dialog怎么添加内部滚动条,自己位置不随内容改变
cdfdfgrd的博客
04-29 864
el-dialog怎么添加内部滚动条,自己位置不随内容改变
el-dialog中内容自定义滚动条
风水道人
10-20 1835
el-dialog中内容自定义滚动条
el-dialog滚动条
Ryeol的博客
09-28 1905
#dialog { overflow-y: auto; }
el-dialog怎么去除滚动条
08-10
要去除 `el-dialog` 中的滚动条，您可以通过设置 `overflow: hidden` 来实现。可以通过以下几种方式来尝试： 1. 使用 CSS：在您的样式表中，为 `el-dialog` 添加以下样式： ```css .el-dialog__wrapper { ...
el-dialog设置滚动条
08-30
1. 首先，在 el-dialog 标签上添加一个 `:show-scrollbar` 属性，将其设置为 `true`，以显示滚动条。例如： ```html <el-dialog :show-scrollbar="true"> <!-- 对话框内容 --> </el-dialog> ``` 2. 然后，在对话框...
el-dialog 滚动条
07-27
如果你想在 el-dialog 中添加滚动条，可以使用以下方法： 1. 使用内置的属性：el-dialog 提供了一个名为 scrollable 的属性，将其设置为 true 即可启用滚动条。例如： ```html <el-dialog :scrollable="true"> <!-...
el-dialog的滚动条如何修改
08-19
2. 使用自定义类：通过为 `el-dialog` 添加自定义类，并在 CSS 中定义相应的样式来修改滚动条。例如，假设您有一个名为 `custom-scrollbar` 的自定义类，可以这样写： ```html <el-dialog title="Dialog" :visible=...
解决el-dialog弹框出现后页面滚动条可滚动问题
weixin_43923808的博客
05-16 1420
在methods方法里写。
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; }
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
elementUI Dialog内容区域显示滚动条
爱米酱的博客
10-25 4652
【代码】elementUI Dialog内容区域显示滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值