el-dialog会话框被抽屉遮挡

### 解决 `el-dialog` 对话框被 `drawer` 组件遮挡的问题

在 Vue2 和 ElementUI 中开发时，如果遇到 `el-dialog` 被 `drawer` 组件遮挡的情况，通常是因为两者的 `z-index` 值冲突所致。为了确保 `el-dialog` 总是在最上层显示，可以调整其 `z-index` 属性。

#### 方法一：通过 CSS 修改 `z-index`

可以通过自定义样式来提高 `el-dialog` 的 `z-index` 值：

/* 提高 dialog 的 z-index */
.el-dialog__wrapper {
  z-index: 3000 !important;
}

这种方法适用于整个项目中的所有 `el-dialog` 实例[^1]。

#### 方法二：动态设置 `el-dialog` 的 `z-index`

对于特定场景下的 `el-dialog`，可以在打开对话框之前动态增加它的 `z-index`:

this.$nextTick(() => {
    this.$refs.dialogRef.$el.style.zIndex = '3000';
});

这段代码会在下一次 DOM 更新循环结束之后执行回调函数，在该函数内部修改指定 `el-dialog` 参考实例的 `z-index`[^2]。

#### 方法三：使用 scoped 样式与深选择器

当仅需影响单个页面或组件内的 `el-dialog` 时，推荐采用 scoped 样式配合 `/deep/` 或者 `::v-deep` 来实现更精确的选择和覆盖：

<style lang="scss" scoped>
/deep/.el-dialog__wrapper {
  .el-dialog {
    z-index: 3000 !important; /* 确保此值高于其他浮动元素 */
  }
}
</style>

这种方式不仅能够有效解决问题，而且不会污染全局样式表[^3]。