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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐