Vue3 Element-Plus el-table嵌套el-image查看大图导致CSS样式错乱的问题（如表格的内容显示在了图片上层）的解决办法 - 附代码

效果

错乱效果（表格的时间列显示在图片上方）

正确效果

问题

        Vue3中使用Element-Plus的el-table嵌套el-image查看大图导致CSS样式错乱

版本

"element-plus": "2.5.5",

解决办法

       1、 办法一：设置CSS样式，直接继承父元素 z-index 属性的值

​
.el-table .el-table__cell {
  z-index: inherit;
}

​

        tips：如果不生效参照以下代码

:deep() .el-table .el-table__cell {
  z-index: inherit !important;
}

        2、办法二： 在  el-image 上添加属性 preview-teleported="true" （推荐）

<el-table-column prop="imageUrl" label="图片">
  <template #default="scope">
	<el-image
	  :src="scope.row.imageUrl"
	  :zoom-rate="1.2"
	  :max-scale="7"
	  :min-scale="0.2"
	  :preview-src-list="[scope.row.imageUrl]"
	  :initial-index="0"
	  :preview-teleported="true"
	  fit="contain"
	/>
  </template>
</el-table-column>

文档地址：

https://element-plus.org/zh-CN/component/image.html

Table 表格 | Element Plus

欢迎关注VX公众号：前端小知识营地