解决element ui el-img 和 el-table一起使用时出现显示叠加混乱

完美解决eLement-plus组件库开发时,el-table与el-image相互层叠，样式冲突问题

组件中添加preview-teleported 属性。

问题复现:el-table开启斑马纹模式,点击预览el-table中图片,此时预览的图片会和带斑马纹的表格行重叠,且图片显示层级在斑马纹行下。添加如下代码到有问题的组件,也可添加在全局样式中,具体看需求。

使用element-plus组件库开发时，在el-table中嵌入el-image，图片预览时两者层叠，样式错乱。

渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 微信搜索【大奇测试开】，关注这个坚持分享测试开发干货的家伙。 在图表统计展示方面，笔者目前使用过的两种开源，分别是 Echats 和 G2Plot 组件，从个人使用上来讲前者应用更广、自定义开发更灵活，后者使用上更简单尤其是在数据绑的格式和方式上更友好，其中在我们使用 El

前端三件套知识点

在日常开发项目中 使用element-plus 中表格中使用 el-image的点击图片出现图片预览会出现以下问题 表格一行会覆盖预览的图片鼠标滑过也会显示表格 el-image 的预览层级和表格的层级冲突导致的。解决方法：有两种一种是直接使用样式穿透 第二种推荐方法 使用官网推荐的 preview-teleported 属性。

在和el-table、el-dialog组合使用时，el-image图片预览的时候，会可能出现显示不全图片的情况。

element-plus中，使用el-table组件，在el-table-column组件中使用插槽中插槽加载el-image组件，点击图片预览时，层级会错乱。通过检查元素，可以发现class="image-viewer__wrapper"这个div是在渲染后td中，虽然有z-index，但是层级依然不正确。方式一：el-image添加preview-teleported属性。element-plus官网组件属性。

之前在处理表格中的图片放大预览时 ，因为vue调用了element ui组件库的表格组件el-table，导致在使用图片放大预览时出现了样式重叠和冲突，看看之前的代码，这里我一开始用的时img标签。没有采用element ui的el-image，因为考虑到z-index方便在img上使用，然并卵，这个方法并不起作用。

el-image预览图片和el-table层级冲突问题

首先我还原一下车祸现场 这样没问题，当我点击人像的图片时就用到el-image这个组件了，然后你看，惨不忍睹 解决办法： .el-table__fixed-body-wrapper { z-index: auto !important; }

与错误示例的主要区别是给需要用到属性的元素的父元素指定 slot-scope = “scope”，并在 :src 的路径指定通过 scope.row.XX的形式指定。el-table-clumn中使用v-bind元素，是不能获取el-table正在进行展示的数据的所以上述代码并不能在单元格内展示图片。elementUI显然考虑到了这一点，为我们提供了内置属性slot-scope，通过访问其内置的row属性可以访问到表格每一列的变量名。

我不得不吐槽一下，我的js水平，真的是烂。哎，学吧。 前几天写了一个关于竖向轮播的功能，链接如下：实现两个公告同屏滚动轮播(elementUi-走马灯效果实现) 效果如下： 代码如下： <el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay"> <el-carousel-item v-for="(items, indexs) in carouselL

可以发现 .image-viewer_wrapper 类名的元素是预览图片的盒子 有设置z-index：2006 但是还是被其余表格列表元素遮挡 说明el-image 的父元素的层级不够高 可以遮挡前面列表的元素 但是后面列表的元素无法遮挡。废话不多说，直接上代码。