el-dialog设置z-index

### 设置 `el-dialog` 组件的 z-index 属性

为了调整 Element UI 中 `el-dialog` 对话框的层级关系，可以通过自定义样式的方式修改其 `z-index` 值。具体实现方式如下：

#### 方法一：全局覆盖默认样式

通过 CSS 或者 SCSS 来重写 `.el-dialog__wrapper` 类的选择器，从而改变整个项目中的对话框显示顺序。

/* 使用更高优先级的选择器 */
body .el-dialog__wrapper {
    /* 自定义 z-index 数值 */
    z-index: 999 !important;
}

这种方法适用于希望一次性设定所有 `el-dialog` 实例的层叠上下文场景[^1]。

#### 方法二：局部作用域内指定

如果仅需针对特定实例应用不同的 `z-index`，可以在模板中直接添加 inline-style 或利用 scoped styles 定义特殊类名并应用于单个组件上。

<template>
  <!-- ... -->
  <el-dialog :style="{ zIndex: customZIndex }">
      <!-- Dialog content here... -->
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const customZIndex = ref(2000); // 设定所需的 z-index 值
// ...
</script>

此方案灵活性较高，允许开发者根据不同业务逻辑动态调整各个弹窗之间的层次关系[^2]。

#### 注意事项

当遇到多个浮动元素相互遮挡的问题时，除了调节 `z-index` 外，还需确认这些容器是否处于相同的堆栈环境之中；另外，过高的 `z-index` 可能会影响其他交互体验，因此建议合理规划数值范围[^3]。