el-dialog overflow
时间: 2023-10-04 17:08:58 浏览: 116
el-dialog的overflow属性可以通过给弹窗内容所在的容器元素设置overflow属性来控制。其中有两种常见的方案可以解决这个问题。第一种方案是在el-dialog中嵌套一个div,并给该div设置固定高度和overflow属性为auto。这样,在内容超出容器高度时,会自动显示滚动条。代码示例如下:
```html
<el-dialog>
<div class="dialog-content">
<!-- 弹窗内容 -->
</div>
</el-dialog>
```
```css
.dialog-content {
overflow: auto;
height: 434px;
/* 其他样式 */
}
```
第二种方案是直接给el-dialog组件添加overflow属性为auto,并设置合适的高度。代码示例如下:
```html
<el-dialog style="overflow: auto; height: 434px;">
<!-- 弹窗内容 -->
</el-dialog>
```
以上是两种常见的解决方案,可以根据具体项目需求选择合适的方式来解决el-dialog的overflow问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [el-dialog 弹窗弹出,导致两个滚动条,影响用户体验](https://blog.csdn.net/weixin_39418338/article/details/118097052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Element UI中el-dialog中内容超出自定义滚动条](https://blog.csdn.net/weixin_58206564/article/details/123467131)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文