element-ui—dialog使用过程中的坑

场景一：我们将dialog写成一个可复用的公共组件用于显示不同内容（如表格操作中的修改或添加的弹窗），之后发现dialog的遮罩将弹出层（点击修改或添加后理应由一个弹窗显示出来）都盖住了，而我想要的效果是遮罩只遮住旧的窗口，而当前窗口应该完全显示；

（注：表格是使用easyui的panel和window来包裹的，dialog才是使用的element-ui中的组件）

百度了一圈最后的解决方案是在el-dialog上加入以下属性：

 

:modal-append-to-body="false"

意为：遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上

 

场景二： 同一个 项目中，dialog用于密码修改，且不引用上面的公共组件，直接使用标签包裹一个form表单。结果表现是这样的：单独点击密码修改打开弹框没问题，但是若先打开一个table-window窗口后再点击密码修改按钮打开弹框，会发现此时的弹框会直接被

table-window遮盖，表面上看似层级不够的原因造成的，但是看了css样式并非如此，或者直接给dialog添加比bable高的层级，一样无济于事。

解决办法如下：在el-dialog上加入以下属性

:append-to-body="true" 

意为：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。（官方的解释：到现在我也没整明白这句话的意思！）

  博客上看到意为博友的解释是这样的：因为有时候会存在页面某些元素没有被 modal 盖上的情况，其实这种情况出现的原因就是你的dialog 是放在当前组件中的，如果放body 下则不会有这些情况！虽然也是似懂非懂，但是起码问题解决了，这就够了。

 

转载于:https://www.cnblogs.com/LindaBlog/p/10882820.html