element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了

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用法：

 
  
   
 

  /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
结果：

样式被成功渲染，覆盖了原样式。界面是也成功显示

第一次写博客（小新）（完）