el-dialog多层嵌套

el-dialog多层嵌套时，可能会遇到内层dialog上有遮罩层无法点击的问题。官方网站在介绍嵌套的dialog时也提到了解决方法。一种方法是给被嵌套的el-dialog增加custom-class属性和append-to-body属性。通过设置custom-class属性可以添加自定义的样式类，而append-to-body属性可以将内层dialog插入到body元素上，确保内外层dialog的层级关系正确。这样就可以解决内层dialog上遮罩层无法点击的问题。另外，官方也建议尽量避免使用嵌套的dialog，如果需要在页面上同时显示多个dialog，可以将它们平级放置。只有在确实需要嵌套dialog的场景下，才使用append-to-body属性来解决层级关系的问题。

相关问题

多个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被关闭后，遮罩层仍然存在，导致无法点击第一个el-dialog的按钮。

解决这个问题的方法是给第二个el-dialog添加append-to-body属性，并将其设置为true。这样，第二个el-dialog会插入到body元素上，保证了内外层el-dialog和遮罩层级关系的正确。

另外，也可以考虑使用el-dialog和ElMessageBox结合的形式，这样就不会出现弹窗被遮住的问题。

以下是一个示例代码，演示了el-dialog嵌套时关闭第二个el-dialog后，第一个el-dialog的按钮可以正常点击：

<template>
  <div>
    <el-dialog
      title="第一个el-dialog"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <p>第一个el-dialog的内容</p>
      <el-button type="primary" @click="openDialog2">打开第二个el-dialog</el-button>
    </el-dialog>

    <el-dialog
      title="第二个el-dialog"
      :visible.sync="dialogVisible2"
      width="30%"
      :append-to-body="true"
    >
      <p>第二个el-dialog的内容</p>
      <el-button type="primary" @click="closeDialog2">关闭第二个el-dialog</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false
    };
  },
  methods: {
    openDialog2() {
      this.dialogVisible2 = true;
    },
    closeDialog2() {
      this.dialogVisible2 = false;
    }
  }
};
</script>