elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTree"）

本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：

弹窗套弹窗出现蒙层、

弹窗套弹窗，子弹窗执行保存（确定）按钮之后还要执行取消按钮、

弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showTree"。

蒙层问题

我们可以看一下elementUI官网上对el-dialog的说明

这时候有两个属性可供我们选择去处理这个问题。当你用:modal-append-to-body="true"的时候，你会发现蒙层问题解决了，但是又有新的问题出现，就是子弹窗关闭不掉了。所以这种方式不可取。

最终的解决方案，就是给父子弹窗都加上:append-to-body='true' ，问题就完美解决了。

子弹窗执行保存（确定）按钮方法之后还要执行取消按钮方法

如果你是在父组件中引入子弹窗是下面这种方式，然后再子弹窗中依然用这种方式引入它的子弹窗，当你在子弹窗中执行孙子弹窗通过this.$emit传递的方法的过程中，你的在取消方法里面写一个debugger,打开控制台，点击孙子弹窗上的保存按钮，你会发现它进入到断点中。怎么解决这个问题呢？

父组件界面引入add弹窗
<ai-dialog :visible.sync="addDialog" :append-to-body='true' :close-on-click-modal="false" :title="titleName" width="80%">
  <add
    ref="addObject"
    :afferentID="afferentID"
    :addObject="noticeObject"
    :visible="addDialog"
    @saveClick="save
    @cancelClick="cancel"
  />
</ai-dialog>

add弹窗界面引入user弹窗

<ai-dialog width="70%" :visible.sync="userTreeDialog" :append-to-body='true'  @close="handleCancelDialog">
    <user 
      :showTree="userTreeDialog" 
      :users="checkedPersons" 
      @cancelClick="handleCancelDialog"
      @addUserCallBack="getUser"/>
</ai-dialog>

解决方法：需要在user弹窗中用ai-dialog把原先写好的代码包裹，在add弹窗中直接用