今日在做项目的时候，遇到一个小问题，在同一页面，使用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
