element el-dialog组件嵌套时遮罩层显示异常

最新推荐文章于 2025-05-23 10:25:29 发布

原创最新推荐文章于 2025-05-23 10:25:29 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

当使用Element UI的el-dialog组件进行嵌套时，若内层Dialog的遮罩层显示在最外面，可以设置内部Dialog的`append-to-body`属性为`true`。这将使内层Dialog插入到body元素上，确保内外层Dialog和遮罩的层级关系正确。通过在内层Dialog的示例代码中添加该属性，可以成功实现内外层Dialog的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

element el-dialog组件进行嵌套时打开里面的弹窗发现遮罩层在最外面
在这里插入图片描述

解决

在内部的el-dialog组件上添加 append-to-body 属性并将属性值设置为 true 以下为官方示例代码

<template>
  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
  
  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
    <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  }
</script>

在这里插入图片描述