如圖：
解決辦法
在el-dialog標簽里添加 :modal-append-to-body='false'
實現(xiàn)效果：
問題解析
先來看看element-ui官網(wǎng)提供的屬性說明文檔
文檔解釋：翻譯成大白話就是薪韩，若el-dialog彈出框設置了modal-append-to-body='true'（默認）屬性援雇，它的遮罩層就會被插入到body標簽下（即與組件所在的最外層div同一層級）分井，知道這個原理就好辦了。
問題分析：經(jīng)過分析源代碼可得鸦做，el-dialog的顯示層和遮罩層都設置了position:fixed，當然顯示層的z-index肯定要比遮罩層的大袱结，才能正常的顯示彈出框作瞄。問題就出在此處，若el-dialog的父級也設置了position:fixed桐愉，并且其z-index比彈出框的遮罩層的胁破啤（遮罩層處于更高一層），那么彈出框的內(nèi)容就會被遮罩層所遮擋住了从诲。
經(jīng)過分析出問題的代碼可得出左痢，el-dialog的父級元素確實設置了position:fixed，并且其z-index比彈出框的遮罩層的小系洛，所以就會出現(xiàn)遮罩層把內(nèi)容擋住的問題俊性。
解決方案
1、給el-dialog設置modal-append-to-body=“false”描扯，使遮罩層插入至 Dialog 的父元素上磅废。（推薦）
2、給position:fixed的父元素設置一個z-index荆烈，并且要比遮蓋層的大拯勉。
3竟趾、el-dialog父元素不使用fixed定位。
為了驗證這個問題宫峦，我特地寫了個demo岔帽，如下圖：
圖一：modal-append-to-body=“true”
圖二：modal-append-to-body=“false”
(完)
