el-dialog同时显示2个对话框,如何控制显示的层级

你可以使用 CSS 的 z-index 属性来控制 el-dialog 的层级，将其中一个对话框的 z-index 值设置为比另一个对话框高即可。具体实现可以参考以下代码：

<el-dialog :visible="dialogVisible1" :z-index="1000">
<!-- 对话框1的内容 -->
</el-dialog>

<el-dialog :visible="dialogVisible2" :z-index="2000">
<!-- 对话框2的内容 -->
</el-dialog>

相关问题

el-dialog层级大于el-popover

在Element UI中，el-dialog和el-popover都是弹出层的组件，但是它们的层级是有差异的。默认情况下，el-dialog的层级较高，因此会覆盖在el-popover之上。

这是因为el-dialog组件在DOM结构中的位置比el-popover更高。el-dialog作为一个弹出的对话框，通常用于展示重要的信息或与用户进行交互，因此需要更高的层级来确保它的显示不被其他元素遮挡。

而el-popover作为一个悬浮提示框，它的层级较低，通常用于提供辅助性的信息或操作。因此，当el-dialog和el-popover同时存在时，el-dialog会覆盖在el-popover之上。

如果需要调整它们之间的层级关系，可以通过在CSS中修改它们的z-index属性来实现。例如，将el-popover的z-index设置为比el-dialog更高的值，可以使el-popover覆盖在el-dialog之上。

el-dialog层级问题

在使用 el-dialog 组件时，可能会遇到弹出框被其他组件覆盖的问题，这是因为 el-dialog 组件的 z-index 值默认为 2000，如果其他组件的 z-index 值大于 2000，就会导致 el-dialog 被覆盖。解决这个问题的方法是通过设置 el-dialog 的 z-index 值大于其他组件的 z-index 值。比如，可以在 el-dialog 上添加一个样式类，设置 z-index 值为 3000，如下所示：

<el-dialog :visible="dialogVisible" class="my-dialog">
  <!-- 对话框内容 -->
</el-dialog>

<style>
.my-dialog {
  z-index: 3000;
}
</style>

这样就可以保证 el-dialog 的 z-index 值大于其他组件的 z-index 值，避免被覆盖的问题。