关于层级问题

解决抽屉层级下下拉框不显示问题

问题分析
抽屉组件（Drawer）和下拉框（Select）同时使用时，下拉框可能被抽屉的遮罩层遮挡。这是由于Element Plus的默认z-index层级设置导致的。

解决方案

调整下拉框的z-index
在el-select组件上添加popper-class="custom-select-dropdown"属性，然后通过CSS提高下拉框的z-index值：

<el-selectv-model="formData.packageProp"popper-class="custom-select-dropdown":popper-append-to-body="false"
><!-- options -->
</el-select>

CSS样式调整
在scoped样式中使用穿透语法:deep()来修改下拉框的z-index：

<style scoped>
/* 自定义抽屉样式 */
.custom-drawer {/* 设置固定高度 */height: 100vh;/* 允许内容滚动 */overflow-y: auto;
}/* 确保抽屉内容区域可以滚动 */
:deep(.el-drawer__body) {height: calc(100% - 55px); /* 减去header高度 */padding: 20px;overflow-y: auto;
}/* 全局样式调整 */
.custom-select-dropdown {z-index: 4001 !important;
}/* 如果使用 scoped，需要添加穿透语法 */
:deep(.custom-select-dropdown) {z-index: 4001 !important;
}/* 通知层级同理 */
.el-notification {z-index: 4009 !important;
}.el-notification--error {z-index: 4009 !important;
}
</style>

注意事项

• 确保popper-append-to-body设置为false
• 检查是否有其他组件（如Notification）的z-index高于下拉框
• 抽屉的遮罩层默认z-index为2000，下拉框需要设置更高的值

调整分页下拉page-sizes选择的 z-index

通过修改 el-select__popper 的 z-index 可以提升下拉的层级。确保该值大于页面中其他元素的 z-index 值。

.el-select__popper {z-index: 6000 !important;
}