el-dialog嵌套遇到的问题

前言

最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。

el-dialog嵌套

我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮

如下图

但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。

然后我去查看文档，查看页面dom结构就知道大致原因了。

这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区域的z-index也是动态生成，默认是2001，它们的定位都是fixed,但是内容区域的z-index会比蒙层的大1，导致内容区域可以高亮。

然后你嵌套的dialog显示后，它的蒙层也是替换第一个dialog的蒙层，同样插入到body，然后它的z-index会递增，是2002，它的内容区域是2003。正常是没有问题，内容区域比蒙层的大。

但是我们忽略了一个问题，此时这个嵌套内容是在第一个dialog下面的，虽然它的z-index比蒙层的大，但是会以第一个dialog内容区域的z-index为准，去和蒙层比较，因为它的z-index（2001）比蒙层的z-index(2002)小，所以导致被盖住了。

解决方法

嵌套的dialog设置:append-to-body=“true”

默认dialog的内容区域是在当前元素下的，当然嵌套的dialog也是一样。如果我们把嵌套的dialog的内容区域插入到body下，因为它的z-index是比蒙层高，这样就不用因为父元素的z-index小导致被盖住了。

可以看到正常显示了。

嵌套的dialog设置:modal-append-to-body=“false”

默认dialog的蒙层是要在body下生成的，如果我们把嵌套的蒙层改成在当前元素下，则嵌套的内容dialog也不会被盖住。

不要采用嵌套的写法

如果能改写成不要嵌套的写法，这样的问题就不复存在。

如果还是要嵌套，那么就采用上面2种方法。