本文探讨了在Element UI中遇到的双层el-dialog样式控制问题。由于第二层dialog挂载到body，导致默认样式失效。通过研究官方文档，发现`append-to-body`属性可能导致主题切换控制失效。解决方案是移除此属性，但又会出现高亮问题。最后，通过避免dialog嵌套，将它们并列放置解决了问题。
关键代码如下：
<html>
<head>
……
</head>
<body>
<div class="dept">
<el-dialog width="450px" :visible.sync="dialogVisible">
<el-button v-model="deptBox.parentId" @click="innerVisible = true" >{
{deptBox.parentName}}</el-button>
<el-dialog width="400px" title="请选择上级部门" :visible.sync="innerVisible" append-to-body>
</el-dialog>
</el-dialog>
</div>
</body>
</html>
问题描述如下：
通过设置.dept.el-dialog样式修改对话框样式，但是第二层对话框样式未正常设置，与第一层不一致。
原因：
第二层dialog挂载到了body下，不在.dept样式控制下。
查询官方资料：
append-to-bodyÿ
最低0.47元/天 解锁文章
扫一扫
1852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
