Quando el-dialog é usado aninhado, o atributo anexar ao corpo deve ser adicionado ao el-dialog interno.
Adicione o atributo custom-class ao el-dialog interno e adicione um nome de classe customizado
<el-dialog
:visible.sync="dialogVisible"
append-to-body
custom-class="tree-cesium-container"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
Em seguida, use a tag style sem escopo e o formato de escrita é o seguinte:
.tree-cesium-container .el-dialog__header {
padding: 0px;
}
.tree-cesium-container .el-dialog__headerbtn {
top: 10px;
right: 10px;
}
Você pode modificar seu estilo
Feito!
-------------------------------------------------- Linha divisória manual---------------------------------------------------------- - ------------------
A propósito, deixe-me registrar como personalizar o estilo do el-dialog em uma camada.
Envolva um div na camada externa do el-dialog e personalize o nome da classe. O el-dialog aqui não tem acréscimo ao corpo
<div class="event-add-or-update">
<el-dialog
:visible.sync="dialogVisible"
custom-class="tree-cesium-container"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
Em seguida, modifique o estilo dentro da tag de estilo com escopo definido e tudo ficará bem.
<style scoped>
.event-add-or-update >>> .el-dialog__body {
max-height: 750px;
overflow: auto;
}
</style>
As duas situações acima não afetarão outro el-dialog, apenas o atual~