Vue3项目使用ElDrawer后select方法不生效

十一吖i2025-05-18 0:09

Vue3 项目中 ElDrawer 内 ElSelect 下拉框 z-index 失效问题分析与解决方案

问题描述

在 Vue3 项目中使用 Element Plus 的 ElDrawer 组件时，当在抽屉内部使用 ElSelect 组件，发现下拉选择框（dropdown）的 z-index 层级问题导致下拉框被抽屉遮挡，即使设置了较高的 z-index 值也不生效。

问题分析

层级上下文 (Stacking Context) 问题

ElDrawer 的特性：ElDrawer 组件默认会创建一个新的层叠上下文，其 z-index 通常设置为较高值（如 2000）
ElSelect 下拉框：默认情况下，Select 的下拉框会被附加到 body 元素，但由于抽屉的层叠上下文限制，即使设置更高 z-index 也无法突破

默认行为问题

popper-append-to-body 默认为 true，导致下拉框的 DOM 结构脱离抽屉
即使设置 :popper-append-to-body="false"，仍需处理 z-index 层级关系

解决方案

javascript 复制代码

<template>
  <ElDrawer
    v-model="dialogVisible"
    :z-index="4000"
    direction="rtl"
    size="1050px"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="custom-drawer"
  >
    <el-form>
      <el-form-item label="进出口资质" prop="isIeQualifications">
        <el-select
          v-model="formData.isIeQualifications"
          placeholder="请选择"
          :popper-append-to-body="false"
          popper-class="custom-select-dropdown"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.IS_ONLINE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </ElDrawer>
</template>

<style scoped>
/* 自定义抽屉容器 */
.custom-drawer {
  position: relative; /* 建立新的层叠上下文 */
  height: 100vh;
  overflow-y: auto;
}

/* 处理抽屉内容区域滚动 */
:deep(.el-drawer__body) {
  height: calc(100% - 55px);
  overflow-y: auto;
  padding: 20px;
}

/* 处理下拉框层级 */
:deep(.custom-select-dropdown) {
  z-index: 4001 !important; /* 必须高于抽屉的 z-index */
  position: relative; /* 确保在抽屉的层叠上下文中 */
}
</style>

结论

通过控制下拉框的 DOM 位置和明确的层叠上下文管理，可以有效解决 ElDrawer 内 ElSelect 下拉框的 z-index 问题。关键在于理解 CSS 层叠上下文的工作原理，并确保下拉框的 z-index 在正确的上下文中计算。