解決辦法
在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比彈出框的遮罩層小，所以也會出現(xiàn)遮罩層把內容擋住的問題
解決方案：
1、給el-dialog設置modal-append-to-body='false'，使遮罩層插入到Dialog的父元素上
2、給position:fixed的父元素設置一個z-index，并且要比遮罩層的大。文章來源：http://www.zghlxwxcb.cn/news/detail-588128.html
3、el-dialog父元素不使用fixed定位。文章來源地址http://www.zghlxwxcb.cn/news/detail-588128.html
到了這里，關于element-ui框架的el-dialog彈出框被遮罩層擋住的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
