element-ui框架的el-dialog弹出框被遮罩层挡住了,vue-element-ui弹出框和el-select层级混乱

Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法

这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下:
情况A:有多个弹出框,你想要的效果可能是 页面->弹出框A->弹出框B,但是实际上出现的是 页面->弹出框B->弹出框A
element-ui框架的el-dialog弹出框被遮罩层挡住了,vue-element-ui弹出框和el-select层级混乱_第1张图片如图所示。图是在网上找的
遇到这种情况不要慌,可以在el-dialog标签里添加 :
:modal-append-to-body=‘false’
参数:modal-append-to-body
说明:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上
element-ui框架的el-dialog弹出框被遮罩层挡住了,vue-element-ui弹出框和el-select层级混乱_第2张图片
大功告成!也有的朋友加上这句话不太行。可以尝试在第二个弹框中加上append-to-body这句话
参数:append-to-body
说明:Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
情况B:弹出框上有el-select,这种就好解决了,以为el-select没有灰色遮罩层,所以只需要拿到el-select这个元素 加上z-index:9999
如果发现拿不到这个元素,可以加上
/deep/ .el-popper{ z-index:9999 }
over!

你可能感兴趣的:(element,el-dialog,el-select,css,css3,vue.js,html5,javascript)