elementUI select组件的选项在dialog组件里面无法显示的问题

Question

select组件的选项数据在dialog组件里面无法显示

如下图:

第一次点开dialog组件 select组件选项数据已经被渲染出来了 但是点击是不显示的

重新点击之后就可以显示里面的数据了

用工具审查html代码发现 第一次点击时 下拉菜单的z-index属性为2000 没点开收起一次 z-index数值就+1 就会将选项数据显示出来了

第一次点击显示

第二次点击显示

代码片段

        <el-form-item label="角色">
          <el-select class="filter-item" v-model="temp.roleId" placeholder="请选择">
            <el-option v-for="item in roleList"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>

        data() {
            return {
                listLoading: true,
                userList:null,
                roleList:[{roleId:'888888888',roleName:'管理员'},{roleId:'1',roleName:'测试角色'}],
                temp: {
                    userId: '',
                    account: '',
                    realName: '',
                    mobile: '',
                    roleId:''
                },
                ...}
                }

PS:

  
  百度了一下,很多人说是1.3.0之前的版本问题. 我检查了下版本为目前最新的版本  故排除了版本造成的原因
  

 
 请各位大牛帮忙解解惑看能解决这个问题不  拜谢
 

Answer 1

最后发现为IDEA自动重复引入了element的模块，导致重复引用冲突造成，删除就好了

Answer 2

遇到同样的问题，你这个解决了吗？

Answer 3

我也遇到了，你把roleId单独拉出来赋给一个中间变量v-model="tmpRoldId"，不要放在temp对象里面。这样就可以了。该死玩意，困扰了我半天！！！！！

Answer 4

我也遇到这个问题，不过你的代码在"element-ui": "^1.4.4","vue": "^2.4.2"下测试通过。
说一说我的情况，我form的model是通过props传递过来的（记做dataModel），因为初始化的时候不需要值，就写成了:model={}。select中的model为v-model="dataModel.id",这样就会出现楼主描述的情况。后来传递props的时候把{}改为
dataModel：{

id:'',
...

}就好了。
困扰了两天才发现这个情况，具体问题还不清除，只能算是临时解决，特意注册回答，希望给后来的人做个参考

Answer 5

我也遇到相同的问题，不过跟版本没关，是视图层没更新，用vm.$set()强制更新就好了，具体看文:
https://blog.csdn.net/PGguoqi...

Answer 6

今天也遇到了同样的问题，不过我是因为同时使用了vant和element两个框架，导致vant中dialog组件的z-index和element中select组件的z-index不同步所导致，经过测试如果使用element的dialog嵌套element的select是不会出现层级显示异常问题的，顺便还是说一下嵌套所导致的z-index层级错误的解决方案吧。首先给element select组件设置一个popper-class属性，这个属性会自动在下拉框选项div上增加class类名，然后再在组件上加上一个visible-change的方法，这个方法用来判断当前下拉框时候被打开，如果打开回调会是true，接着再这个方法中直接操作dom改变类中的z-index即可，代码图：
需要注意的是函数中需要使用计时器，避免下拉框dom还没渲染完毕就直接更改z-index造成的无效反应。以上是我的结局方案。