When I was working on a project today, I encountered a small problem. On the same page, I used Element’s popbox component, but I found that the popbox would become bright after the second mouse click, and it seemed to be covered! (As shown in figure);

Element dialog nesting problem, the reason why the second pop-up will be covered is because no append-to-body is given

Nested Dialogs are not normally recommended, and if you need to display multiple dialogs on a page at the same time, they can be placed horizontally. For scenarios that do require nested dialogs, we provide the append-to-body attribute. Set this property to true for the inner Dialog, and it is inserted into the body element, ensuring the correct relationship between the inner and outer Dialog and the mask hierarchy.

Used if you need to nest another Dialog inside a Dialogappend-to-bodyProperties.

<template>
  <div id="datagovernIssu">
    <div id="catalogTotalChart" style="height: 500px; width: 100%;"></div>
    <el-dialog
      :title="' Overview of Data Governance - Published Services - Municipal Commission of Transport '+ govName"
      :visible.sync="innerVisible"
      width="1100px" append-to-body>// Second time frame!<template>
        <div style="margin-left: 450px" >
          <span style="align-content: center;">The Shanghai Municipal Commission of Transport has released details of the service</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;// Set this property to true for the inner Dialog and it will be inserted into the body element, ensuring the correct relationship between the inner Dialog and the mask hierarchy.}); }}Copy the code

Add one to the second bounceAppend-to-body is fine! (As shown in figure)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — to expand — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Element Dialog

Attributes

parameter instructions type An optional value The default value
visible Whether to display Dialog, support the.sync modifier boolean – false
title The title of the Dialog can also be passed in through named slot (see table below) string – –
width The width of the Dialog string – 50%
fullscreen Whether it is a full-screen Dialog boolean – false
top The margin-top value in Dialog CSS string – 15vh
modal Whether a mask layer is required boolean – true
modal-append-to-body Whether the mask layer is inserted on the body element, if false, the mask layer is inserted on the parent element of the Dialog boolean – true
append-to-body Whether the Dialog itself is inserted on the body element. Nested dialogs must specify this property and assign it to true boolean – false
lock-scroll Whether to scroll the body lock when the Dialog appears boolean – true
custom-class The custom class name for Dialog string – –
close-on-click-modal Whether Dialog can be closed by clicking Modal boolean – true
close-on-press-escape Whether the Dialog can be closed by pressing ESC boolean – true
show-close Whether to display the close button boolean – true
before-close The callback before closing pauses the closing of the Dialog Function (done), done is used to close Dialog – –
center Whether to center the head and bottom boolean – false

OK, that’s where I’ll start today’s article. If you have a problem, please send a message.

If this article has been helpful, please put your thumb in the bottom left corner of the article. (# ^. ^ #);

If you like the articles shared by Bug bug, please send bug bug a note! The danjun ‘ᴗ, you guys will have a cameo appearance with you.

If you have any questions about this article, please leave a comment below or join the group [Group number: 708072830].

In view of limited personal experience, all views and technical research points, if you have any objection, please directly reply to participate in the discussion (no offensive comments, thank you);

Copyright notice: This article is the blogger’s original article, reprint please attach the original source link and this article statement, all rights reserved, piracy will investigate! (* ^ del ^ *).