免费申请企业网站,互换链接的方法,设计配色的网站,深圳做分销网站设计项目场景#xff1a;
项目中遇到一个问题#xff0c;下拉框选择之后弹出一个弹出框选择数据再关闭。 问题就出在#xff0c;我打开下拉框后再弹出弹出框#xff0c;弹出框的 z-index 层级没有 select 的层级高#xff0c;导致我弹框弹出了几个下拉框还在弹出框上面显示着…项目场景
项目中遇到一个问题下拉框选择之后弹出一个弹出框选择数据再关闭。 问题就出在我打开下拉框后再弹出弹出框弹出框的 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-modelvalue placeholder请选择 popper-classselect_poppers //定义class
el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select//样式里写
style // 这里加scoped的话提升层级不会生效
.select_poppers{z-index: 2000!important;
}
/style因为我加的自定义类名 select_poppers 是只有这个页面才有的所以即使我不加 scoped 也不会影响到全局样式因为新加的类名只有本页面才有这样就完成了不影响全局的情况下修改 el-select 层级
