解决办法
在el-dialog标签里添加 :modal-append-to-body=‘false’
问题分析 先来看看element-ui官网提供的属性说明文档
文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'(默认)属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了
:append-to-body='true'
或者
:modal-append-to-body='false'像这样：
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" top='60px' :before-close="handleClose"
:append-to-body='true'>
问题分析：经过分析源码可以知道，el-dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。问题就出在此处，若el-dialog的父级也设置了position:fixed，并且其中z-index比弹出框的遮罩层的小（遮罩层出于更高一层），那么弹出框的内容就会被遮罩层所遮挡住了。
经过分析问题的代码可以知道，el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层小，所以也会出现遮罩层把内容挡住的问题
解决方案：
1、给el-dialog设置modal-append-to-body='false'，使遮罩层插入到Dialog的父元素上
2、给position:fixed的父元素设置一个z-index，并且要比遮罩层的大。文章来源：https://www.toymoban.com/news/detail-588128.html
3、el-dialog父元素不使用fixed定位。文章来源地址https://www.toymoban.com/news/detail-588128.html
到了这里，关于element-ui框架的el-dialog弹出框被遮罩层挡住的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
