修改 el-dialog 的层级

### 修改 Element UI `el-dialog` 的 Z-Index

为了调整 `el-dialog` 组件的 z-index 层级，可以通过自定义样式覆盖默认设置。Element UI 默认情况下为 `el-dialog` 设置了一个初始的 z-index 值，在某些场景下可能需要手动调整这个值来确保对话框能够正确显示。

#### 方法一：全局修改 CSS 变量
如果使用的是支持 CSS 预处理器（如 SCSS 或 Less）的方式引入 Element UI，则可以在项目的变量文件中重新定义 `el-dialog` 的 z-index：

// 在 main.scss 中添加如下代码
$--dialog-zindex: 3000;
@import "~element-ui/packages/theme-chalk/src/index";

这种方法适用于希望一次性更改整个应用中的所有 `el-dialog` 对话框层级的情况[^1]。

#### 方法二：局部作用域内通过类名重写样式
对于特定页面或组件内的需求，可以采用更灵活的方法——即只针对某个具体的 `el-dialog` 实例进行样式定制。这通常是在 Vue 单文件组件 (SFC) 中完成的：

<template>
  <!-- 使用 custom-class 来指定额外的样式 -->
  <el-dialog :visible.sync="dialogVisible" custom-class="my-custom-dialog">
    ...
  </el-dialog>
</template>

<style scoped lang="css">
/* 定义 .my-custom-dialog 类 */
.my-custom-dialog {
  /* 调整 z-index 到所需数值 */
  z-index: 3000 !important;
}
</style>

此方法允许开发者根据实际业务逻辑动态设定不同的 z-index 数值，而不会影响到其他地方使用的 `el-dialog`[^2]。

#### 方法三：直接操作 DOM 元素
当遇到复杂的布局问题或者其他插件冲突时，还可以考虑利用 JavaScript 动态改变元素属性的方式来解决问题。不过这种方式不推荐作为首选方案，因为可能会带来维护上的困难以及潜在的安全隐患。

this.$nextTick(() => {
  const dialogElm = this.$refs.dialog.$el;
  if (dialogElm && dialogElm.style) {
    dialogElm.style.zIndex = '3000';
  }
});

上述三种方式可以根据具体的应用环境和个人偏好选择最合适的一种实施。值得注意的是，无论采取哪种手段都应考虑到不同浏览器之间的兼容性差异，并测试确认最终效果是否满足预期[^3]。