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