使用el-dialog遇到的坑——append-to-body

最新推荐文章于 2025-03-25 19:14:11 发布

syx_cainiao

最新推荐文章于 2025-03-25 19:14:11 发布

阅读量3.7w

点赞数 16

分类专栏：前端

本文链接：https://blog.csdn.net/syx_cainiao/article/details/110196546

版权

前端专栏收录该内容

26 篇文章

订阅专栏

在使用Element UI的el-dialog组件时，遇到在添加el-scrollbar滚动条后样式无法生效的问题。通过查找资料发现，问题出在'append-to-body'属性上。该属性导致内层弹框样式设置失效。解决方案是移除'append-to-body'属性。ElementUI官方文档指出，此属性用于在嵌套Dialog场景中保持层级关系。移除后，el-dialog重新受父级样式控制，实现了预期效果。

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

场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。
我要的效果：
在这里插入图片描述
我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果，我一度怀疑是我添加代码时添加错了，代码如下：

<el-dialog class="complainInfo" :visible.sync="openView" width="900px" append-to-body>
      <div class="section-title" slot="title">
        <div class="verticalBar"> </div>
        XXXXXX
      </div>
      <el-scrollbar style="height: 100%">
        <el-form action="">
        	<!-- 表单内容 -->
        	......
        </el-form>
      </el-scrollbar>
</el-dialog>

.complainInfo .el-dialog__body {
    height: 700px;
}

后来查了百度，在一篇文章找到了问题所在和解决办法，但是并没有说明原因。

问题所在：append-to-body属性，导致内层弹框样式设置不上
解决办法：去除 append-to-body 属性

最终效果：
在这里插入图片描述

ElementUI 官方文档解释说append-to-body：

Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

在嵌套Dialog场景中，将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确

这样原因就出来了：
设置了append-to-body属性的el-dialog是挂载到body上的，不在.complainInfo父级样式的控制下