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

问题描述

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

问题分析

1. 层级上下文 (Stacking Context) 问题

ElDrawer 的特性：ElDrawer 组件默认会创建一个新的层叠上下文，其 z-index 通常设置为较高值（如 2000）

ElSelect 下拉框：默认情况下，Select 的下拉框会被附加到 body 元素，但由于抽屉的层叠上下文限制，即使设置更高 z-index 也无法突破

2. 默认行为问题

popper-append-to-body 默认为 true，导致下拉框的 DOM 结构脱离抽屉

即使设置 :popper-append-to-body=“false”，仍需处理 z-index 层级关系

解决方案

<template><ElDrawerv-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-selectv-model="formData.isIeQualifications"placeholder="请选择":popper-append-to-body="false"popper-class="custom-select-dropdown"><el-optionv-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 在正确的上下文中计算。