在开发过程中发现组件中el-select点击三下才弹出下来,查询样式后发现层级过低,每次点击下拉菜后层级会逐步增加,本文通过定义组件样式来处理遇到的问题及遇到的坑。本文未解决vue层级自增的问题,而是直接处理了层级问题,但思路可以作为参考。
一、自定义组件样式
Element Plus提供了一个名为popper-class的属性,用于指定Popper.js弹出框的自定义样式类。通过这个属性,我们可以为<el-select>组件的下拉选项框添加自定义样式,并设置合适的z-index值,从而解决层级过低的问题。
1. 添加popper-class属性
<template> <div> <el-select v-model="triggerjson_select_value" placeholder="Select" popper-class="select_popper"> <el-option v-for="item_select in triggerjson_select_options" :key="item_select.value" :label="item_select.label" :value="item_select.value" /> </el-select> </div> </template>
2. 添加自定义样式
.select_popper {
z-index: 99999 !important;
}二、解决坑,定义的样式不起作用
重新定义style,不要使用scoped
<style lang="scss">
.select-popper {
z-index: 99999 !important;
}
</style>