vue element-ui的嵌套dialog遮罩层

自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，leader让我不要用dialog，但是真的不太想重写(懒），自己解决办法如下

打开dialog时，遮罩层直接将全部body遮住

这个坑网上已经有很多篇文章介绍到过了，加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body的问题，不多详细介绍了

// An highlighted block
  <el-dialog title="大dialog" :visible.sync="createOrderDialog" :modal-append-to-body='false'>
  </el-dialog>

内嵌dialog关闭时父级dialog依旧被遮罩层遮住

打开内嵌dialog时，遮罩层将父级的dialog也一起遮住，并且关闭后也保持遮住的样子，搜了很多也没看到解决方法。因为看到element-ui文档里有介绍 内嵌dialog需要加append-to-body，

将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

所以思路是试试也把父级dialog当成内嵌dialog 插入至body元素上，是不是也能保证和遮罩层及关系正确，发现行得通
解决方法如下：
在父级dialog里也加上append-to-body即可

// An highlighted block
   <el-dialog title="新建订单" :visible.sync="createOrderDialog" :modal-append-to-body='false' append-to-body>
        <el-dialog
          width="30%"
          title="内层 Dialog"
          :visible.sync="innerVisible"
          append-to-body>
          <el-form :model="pump">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="pump.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="pump.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = false">确 定</el-button>
          </div>
        </el-dialog>
  </el-dialog>

自己的小尝试，如有不对欢迎指正，希望能帮大家解决问题~