el-dialog のネスト、内部の el-dialog スタイル (カスタム スタイル) を変更します。

el-dialog をネストして使用する場合、 append-to-body属性を内部の el-dialog に追加する必要があります。

Custom-class属性を内部 el-dialog に追加し、カスタム クラス名を追加します。

<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>

次に、scoped なしで style タグを使用し、記述形式は次のようになります。

.tree-cesium-container .el-dialog__header {
  padding: 0px;
}
.tree-cesium-container .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
}

スタイルを変更できます

 終わり！

--------------------------------------------------手動分割ライン---------------------------------------------- - ------------------

ちなみに、el-dialogのスタイルを1レイヤーでカスタマイズする方法を記録しておきます。

el-dialog の外層に div をラップし、クラス名をカスタマイズします。ここでの el-dialog には、append-to-body がありません。

<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>

次に、スコープ付きスタイルタグ内のスタイルを変更すれば問題ありません。

<style scoped>
.event-add-or-update >>> .el-dialog__body {
  max-height: 750px;
  overflow: auto;
}
</style>

上記の 2 つの状況は他の el-dialog には影響せず、現在の el-dialog にのみ影響します~