项目场景:
项目中遇到一个问题,下拉框选择之后弹出一个弹出框选择数据再关闭。
问题就出在,我打开下拉框后再弹出弹出框,弹出框的 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>
因为我加的自定义类名 select_poppers 是只有这个页面才有的,所以即使我不加 scoped 也不会影响到全局样式,因为新加的类名只有本页面才有,这样就完成了不影响全局的情况下修改 el-select 层级