问题背景

在实际业务开发中，常常会遇到弹窗（Dialog）嵌套弹窗的场景。例如，主页面弹出一个 Dialog，Dialog 内部又有新增/编辑等子弹窗。Element UI 的 el-dialog 组件默认遮罩层和弹窗本身都挂载到 body，但嵌套弹窗时容易出现遮罩层覆盖异常、层级错乱、灰色蒙层遮挡整个页面等问题。这两天在开发一个项目的时候，就遇到了这种情况，由于我的这个组件嵌入了另一个组件，组件在多处复用，有作为父级Dialog 打开，也有作为嵌套 Dialog 打开，踩了一些坑。在此我将问题的处理经过和总结的最佳实践分享给大家，希望对遇到类似问题的伙伴有帮助。

处理过程回顾

1. 初步排查：发现嵌套弹窗时，内层 Dialog 的遮罩层会覆盖整个页面，导致外层弹窗内容也被遮挡。
2. 属性尝试：尝试在父组件传递 append-to-body 和 modal-append-to-body 属性，但由于 el-dialog 定义在子组件内部，属性无法生效。
3. 官方文档查阅：明确 append-to-body 控制 Dialog 本身挂载位置，modal-append-to-body 控制遮罩层挂载位置。
4. 最佳方案确定：将 el-dialog 移到父组件，子组件只负责表单内容和交互，弹窗相关属性和显示逻辑全部由父组件统一管理。
5. 重复按钮处理：发现弹窗底部 Cancel 按钮重复，最终只保留表单内的 Cancel 按钮，界面更简洁。
6. 问题彻底解决：弹窗嵌套、遮罩层、层级、交互全部正常，用户体验最佳。

modal-append-to-body 和 append-to-body 的最佳实践

• append-to-body：是否将 Dialog 本身挂载到 body。嵌套弹窗时必须设置为 true，否则弹窗会被父级容器裁剪或遮挡。
• modal-append-to-body：是否将遮罩层挂载到 body。嵌套弹窗时建议设置为 false，让遮罩层只覆盖父 Dialog 区域，避免遮罩层层级异常。

推荐配置：

<el-dialog
  :visible.sync="showDialog"
  append-to-body
  :modal-append-to-body="false"
>
  <!-- 表单内容 -->
</el-dialog>

el-dialog 组件定义的最佳实践

1. 弹窗统一由父组件管理：所有弹窗相关属性（显示/隐藏、遮罩层、挂载位置、层级、事件）都在父组件统一管理，子组件只负责内容和交互。
2. 内容通过 props 或 slot 传递：子组件只暴露表单内容，弹窗行为由父组件控制，避免弹窗属性失效。
3. 避免重复按钮：弹窗底部按钮只保留一套，推荐在表单内容组件内实现 Cancel/提交按钮。
4. 事件传递清晰：子组件通过 $emit 通知父组件关闭弹窗或提交成功，父组件负责弹窗状态切换和数据刷新。

代码示例

父组件（管理弹窗）：

<el-dialog
  :visible.sync="showAddDialog"
  :title="editingData ? 'Edit' : 'Add'"
  width="700px"
  append-to-body
  :modal-append-to-body="false"
  :before-close="handleDialogClose"
>
  <pre-authorization-add
    :patient-id="patientId"
    :edit-data="editingData"
    @success="handleSuccess"
    @close="handleDialogClose"
  />
</el-dialog>

子组件（只负责内容）：

<template>
  <el-form ...>
    <!-- 表单内容 -->
    <div class="dialog-footer">
      <el-button @click="$emit('close')">Cancel</el-button>
      <el-button type="primary" @click="handleSubmit">{{ isEdit ? 'Update' : 'Add' }}</el-button>
    </div>
  </el-form>
</template>

总结

• 弹窗嵌套场景下，务必将 el-dialog 放在父组件，子组件只负责内容。
• append-to-body 设置为 true，modal-append-to-body 设置为 false，可彻底解决遮罩层和层级问题。
• 保持弹窗行为和内容分离，事件传递清晰，界面简洁。

参考：Element UI 官方文档 https://element.eleme.io/#/en-US/component/dialog