element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决？

版权声明：如果对您有所帮助，那就随手分享帮助更多人吧！ https://blog.csdn.net/weixin_43970743/article/details/88971981

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

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	—	false
title	Dialog 的标题，也可通过具名 slot （见下表）传入	string	—	—
width	Dialog 的宽度	string	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上	boolean	—	true
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	Dialog 的自定义类名	string	—	—
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog	—	—
center	是否对头部和底部采用居中布局	boolean	—	false