el-dialog固定高度

张媛的博客

已于 2022-11-15 17:42:53 修改

阅读量1.7w

点赞数 9

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

于 2022-11-15 17:38:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42132841/article/details/127870286

版权

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

前端

22 篇文章

订阅专栏

这篇博客介绍了如何通过添加custom-class和使用CSS深度选择器`::v-deep`来调整ElementUI的Dialog组件，使其在内容超出屏幕时自动出现滚动条，并保持标题和按钮位置固定，从而提升用户体验。具体解决方案包括设置`height`、`max-height`和`overflow-y`属性，确保弹出层和内容区域的高度适中。

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

el-dialog默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。

依照elementUI文档给dialog添加了 custom-class 之后利用 ::v-deep 穿透，在css中添加以下代码就能实现高度超出了：

.container-box{
    //弹出层的高度
    ::v-deep .el-dialog.import-dialog{
      height: auto;
      max-height: 80vh;
      overflow-y: auto;
    }
    //弹出层里内容的高度
    ::v-deep .el-dialog__body{
      max-height: 70vh!important;
    }
  }