【Element Plus】el-table中使用el-image图片预览被其他表格遮挡，使用z-index层级设置无效

小明在码鱼

已于 2024-10-11 17:46:30 修改

阅读量1.7k

点赞数 21

文章标签： vue.js javascript elementui 笔记学习前端

于 2024-10-11 17:40:30 首次发布

本文链接：https://blog.csdn.net/m0_59079084/article/details/142859512

版权

使用 Element Plus 开发项目时，发现在 el-table 中使用el-image的图片预览无法遮住全部的el-table-column

在这里插入图片描述

觉得是层级的问题： el-table的预览层的 z-index 值高于 el-image 的层级。
就使用了官网上的 z-index 设置图片预览的z-index，但是无效

在这里插入图片描述

无效的原因应该是：z-index只在同一层叠上下文中才有意义。当父元素设置了 position: relative 并且指定了 z-index（值不是 auto），它会创建一个新的堆叠上下文。如果子元素本身也设置了 position 和 z-index，或者其他会创建堆叠上下文的属性（如 opacity 小于 1），它也会创建一个新的堆叠上下文。

通过查看元素发现确实存在position和z-index，导致这个问题的是position:relative和z-index: var(--el-table-index);，通过去掉样式上的position和z-index都能让这个问题消失。

在这里插入图片描述

只需要在el-image中加入:preview-teleported="true"，把image-viewer 插入至 body 元素上，就可以解决问题了

   <el-image
            style="width: 100px; height: 100px"
            :src="row.images[0]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="row.images"
            fit="cover"
			:preview-teleported="true"
          />