一、问题描述

append-to-body属性，导致内层弹框样式设置不上

二、解决办法，

自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示

三、弹框嵌套示例

要点：

• 去掉 append-to-body 属性，内层弹框和外层弹框写在同级，只需把内层的那部分代码写在外层弹框的下面就行了，不用嵌套写。相当于两个dialog并列，后显示的写在最后就行了
• 不是真正的嵌套的写法，只是看起来实现了想要弹出效果

Test.vue

<template>
  <div class="test">
    <el-button type="danger" style="margin:50px;" @click="showOuterPopup"
      >打开外层弹框</el-button
    >
    <el-dialog
      class="comn_dialog"
      title="外层弹框"
      :visible.sync="outerVisible"
      width="40%"
    >
      <p style="color:red;">我是外层弹框</p>
      <el-button @click="showInnerPopup">点击显示内层弹框</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="outerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      class="comn_dialog"
      title="内层弹框"
      :visible.sync="innerVisible"
      width="20%"
    >
      <span style="color:green;">我是内层弹框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerVisible: false, // 外层弹框是否显示
      innerVisible: false // 内层弹框是否显示
    };
  },
  methods: {
    showOuterPopup() {
      this.outerVisible = true; // 显示外层弹框
    },
    showInnerPopup() {
      this.innerVisible = true; //显示内层弹框
    }
  }
};
</script>

效果如图：

Tips: 弹框的样式已被重写，详情可参考 el-dialog的二次封装,里面的 comn_dialog 样式即为弹框的样式，可根据自己的情况进行更改