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ÿ