elemet-ui el-tab中嵌套 el-dialog异步触发modal遮罩层显示的坑

现象:

el-tab中嵌套dialog并异步触发时,切换el-tab后上次el-tab中的dialog 会显示遮罩层

原因:

dialog 的遮罩层在body中会全局显示

解决方案:

dialog 中modal设置为false,并在tab中自定义一个遮罩层(el-dialog如果多次触发默认会删除前面遮罩) dialog position:absolute 只显示在tab中

示例代码

    <!-- 消息dialog -->
    <el-dialog
      :modal="false"
      :title="title"
      :visible.sync="visible"
      width="70%"
      show-close
      destroy-on-close
      close-on-press-escape
      custom-class="errorMsg"
    >
      <el-alert
        type="error"
        :closable="false"
      >
        <div

          class="message"
          v-html="message.replace(/\n/g, '<br>')"
        />
      </el-alert>
    </el-dialog>
<!-- 遮罩层 -->
 <div v-show="visible" class="v-modal" style="z-index: 1000;position:absolute" />
 
 
 
.editer ::v-deep{
   .el-dialog__wrapper{
     position:absolute
   }
 }