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

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

article 2025/1/23 7:18:26

项目场景：

项目中遇到一个问题，下拉框选择之后弹出一个弹出框选择数据再关闭。
问题就出在，我打开下拉框后再弹出弹出框，弹出框的 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-option
      v-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>