fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最新推荐文章于 2025-09-03 11:56:38 发布

原创最新推荐文章于 2025-09-03 11:56:38 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css

在使用Element UI的el-table组件时，为实现表头固定效果，给el-table-column添加了fixed属性。然而，这导致了el-dialog弹框被遮罩层覆盖。解决方法是在el-dialog上设置modal-append-to-body='false'，这样弹框将不会被插入到body标签下，而是保持在组件的父元素层级，从而避免了被遮罩层覆盖的问题。

fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最近由于项目需要给el-table固定表头，于是就给el-table-column添加了fixed属性，表头成功固定，但是el-dialog弹框却被覆盖了，呜呜呜~
在这里插入图片描述

解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可
若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）
最后完美解决
在这里插入图片描述