element-ui 两层dialog,第二层dialog里面的el-select下拉选项被遮盖住了
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui 两层dialog,第二层dialog里面的el-select下拉选项被遮盖住了
问题描述:在同一个页面内,弹出两个dialog,第二个dialog在第一个dialog上方。第二个dialog里面是个form表单,表单里的el-select组件下拉选项被遮盖住了。
解决思路:下拉框z-index层级太低,所以需要修改下拉框的z-index。
但是直接在el-select添加样式,是不会对下拉框有影响的,还好我们在element-ui官网看到el-select 有popper-class这个属性可以给下拉框添加样式。
popper-class用法:
<el-select v-model="newDxmbform.mblx" placeholder="请选择"
:popper-append-to-body="false"
popper-class="select-popper">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
/deep/ .select-popper { // 参照网上其他资料
z-index: 8888 !important;
}
注意:popper-class要搭配:popper-append-to-body="false"使用
页面效果:
很明显样式乱了,
我们看到,该下拉框div从body元素变成了紧挨着el-select后面的元素(:popper-append-to-body="false"效果)。新加的样式名也的确加入到下拉框里面了,但是在浏览器右侧Styles窗口中并不能找到新加样式的内容(省略截图),结果自然就是该样式没有成功添加。
然后我自己试了半天,得出了一个解决方案:
.el-select /deep/ .select-popper {
z-index: 8888 !important;
top: auto !important;
left: auto !important
}
在/deep/ 穿透操作符前面加入父级样式 .el-select
结果:
样式被成功渲染,覆盖了原样式。界面是也成功显示
第一次写博客(小新)(完)
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)