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弹窗

  

add弹窗界面引入user弹窗

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

  :showTree="userTreeDialog"
  :users="checkedPersons"
  @cancelClick="handleCancelDialog"
  @addUserCallBack="getUser"/>

 

取消 保存按钮不报错，弹窗自带关闭x按钮报错

我们在点击按钮的时候，不报错，是因为我们把方法通过this.$emit传递给了父组件了，让父组件去改变自身的值。

但是弹窗自带的x关闭按钮，如果不写方法，就默认自己修改了：visible.scyc绑定的值，也就是直接改变了父组件传递过来控制子组件显示或隐藏的值。

这个时候，我们需要借用我们的取消按钮的方法，因为x执行的是和取消一样的效果。

在ai-dialog上绑定

:before-close="handleDialogClose"

我们在user弹窗中的取消方法中写的是

this.$emit('cancelClick')

所以在弹窗x按钮方法里同样这样写，这样在add弹窗中只需要处理一次即可。