当前位置：首页 > news >正文

vue中elementUI的el-select下拉框的层级太高修改设置！

news 2025/4/17 1:41:51

项目场景：

项目中遇到一个问题，下拉框选择之后弹出一个弹出框选择数据再关闭。
问题就出在，我打开下拉框后再弹出弹出框，弹出框的 z-index 层级没有 select 的层级高，导致我弹框弹出了几个下拉框还在弹出框上面显示着，修改弹框层级的话又会盖住全局 loading 层级，所以我就想只修改 select 的层级，但是 ::v-deep 这些都修改不动，后来搜索找到问题是

<style>  // 这里加scoped的话，提升层级不会生效

一般写的样式都会加上 scoped 防止样式干扰全局样式从而引发其他样式问题，但是 el-select 还只有不加才生效

但是这样就会导致一个问题我知己在style里修改 el-select 本身的类名，因为没加 scoped 导致了其他页面下拉框层级也改变了，这就不符合只修改当前页面不影响全局的本意了

<style>
//el-select-dropdown为select都有的类名，再加上没有加scoped会导致影响全局select层级.el-select-dropdown{z-index:2000!important;}
</style>

解决方案：

最终解决方案：
结合给 el-select 添加自定义类名

<el-select v-model="value" placeholder="请选择" popper-class="select_poppers"  //定义class
><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>//样式里写
<style>  // 这里加scoped的话，提升层级不会生效
.select_poppers{z-index: 2000!important;
}
</style>