el-dialog 设置不遮蔽

el-dialog 设置不遮蔽的可能原因有多种。首先，如果在使用嵌套的 Dialog 时没有正确设置 append-to-body 属性，会导致内外层 Dialog 的遮罩层级关系不正确，从而出现不遮蔽的情况。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [el-dialog遮罩层的问题](https://blog.csdn.net/simple_smile1208/article/details/119930950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]

相关问题

多个el-dialog嵌套后 .el-dialog_body样式如何根据不同el-dialog区分设置

可以通过给每个 `el-dialog` 组件添加一个不同的 `class`，然后使用该 `class` 来区分设置不同的样式。

例如，假设你有两个 `el-dialog` 组件，一个是 `dialog-1`，另一个是 `dialog-2`，你可以给它们分别加上不同的 `class`：

<el-dialog class="dialog-1">
  ...
</el-dialog>

<el-dialog class="dialog-2">
  ...
</el-dialog>

然后在 CSS 中，你可以通过选择器来对不同的 `el-dialog` 组件进行不同的样式设置：

.dialog-1 .el-dialog__body {
  /* 设置 dialog-1 中 el-dialog__body 的样式 */
}

.dialog-2 .el-dialog__body {
  /* 设置 dialog-2 中 el-dialog__body 的样式 */
}

这样就可以根据不同的 `class` 区分设置不同的样式了。

在el-dialog中打开 el-dialog 去掉遮罩层后先打开的el-dialog不能操作

在el-dialog中打开el-dialog后，如果去掉了遮罩层，那么先打开的el-dialog将无法操作。为了解决这个问题，可以在新打开的el-dialog中设置`append-to-body="true"`。这样可以将el-dialog的DOM元素直接添加到body中，避免了嵌套的问题，使得先打开的el-dialog可以正常操作。

具体代码如下：

<template>
  <el-dialog title="表单" :close-on-click-modal="false" width="80%" :append-to-body="true" :visible.sync="visible">
    <!-- el-dialog的内容 -->
  </el-dialog>
</template>

这样设置后，先打开的el-dialog就可以正常操作了。