Dialog 对话框里面嵌套了一个Dialog 对话框，解决办法：append-to-body
关键代码如下：
<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，Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。
但是实验证明，若设置了append-to-body导致主题切换无法控制，不设置也没啥问题啊。
去掉append-to-body属性后，又出爱心如下问题：
明显的第二层没有高亮，需要点击鼠标才高亮。
修改代码，将两个el-dialog并列放置，不要嵌套其中即可。
最终代码如下：
<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>
<el-dialog width="400px" title="请选择上级部门" :visible.sync="innerVisible">
</el-dialog>
</div>
</div>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
