aninhamento do el-dialog, modifique o estilo interno do el-dialog (estilo personalizado)

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~