今日在做项目的时候，遇到一个小问题，在同一页面，使用Element的弹框组件，却发现第二次弹框得鼠标点击之后才会显示变亮，似乎被遮住了！（如图效果）;

才发现，element 的dialog嵌套问题，之所以第二次弹出的会被遮住，是因为没有给定 append-to-body

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

<template>

 <div id="datagovernIssu">

   <div id="catalogTotalChart" style="height: 500px;width: 100%;"></div>

   <el-dialog

     :title="'数据治理总览-已发布服务-市交通委'+ govName"

     :visible.sync="innerVisible"

     width="1100px" append-to-body>   //第二次弹框！

     <template>

       <div style="margin-left: 450px" >

         <span style="align-content: center;">上海市交通委已发布服务详情</span></div>

       <el-table

         :data="tableData"

         style="width: 100%">

     </template>

   </el-dialog>

 </div>

</template>

<script>

 export default {

   name: 'datagovernIssu',

   data() {  

       }

     }

   },

methods: {

     clickHandle() {

       this.catalogTotalChart.on('click','series.bar', (params) => {

         this.innerVisible = true;//将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

       });

     }

   }

在第二次弹框加一个append-to-body就好了！（如图演示）

--------------------------------拓展--------------------------------

Element组件之【Dialog 对话框】

Attributes