使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题

在日常开发项目中 使用element-plus 中表格中使用 el-image的点击图片出现图片预览

会出现以下问题 表格一行会覆盖预览的图片

鼠标滑过也会显示表格 el-image 的预览层级和表格的层级冲突导致的。

解决方法:有两种一种是直接使用样式穿透 第二种推荐方法 使用官网推荐的 preview-teleported 属性

第一种解决方法:table样式穿透

javascript 复制代码
::v-deep(.el-table__cell) {
	position: static !important;
}

第二种解决方法(官方推荐):preview-teleported属性

javascript 复制代码
<el-image
	:src="图片地址"
	fit="cover"
	:preview-src-list="[图片地址]"
	preview-teleported
/>

注:此方法是官网推荐的方法 官网地址:链接: elment-pluse#Table表格 点击打开此链接鼠标拖动至最下方 有相关说明

相关推荐
Csvn7 小时前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师7 小时前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
yume_sibai7 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs7 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
IT_陈寒7 小时前
Java字符串判等踩坑记:==和equals真的不能乱用
前端·人工智能·后端
晴天168 小时前
前端虚拟滚动(虚拟列表)原理与实战
前端
晴天168 小时前
前端 RAIL 性能模型实战分享-Day37
前端
变与不变8068 小时前
JS作用域,作用域链
前端·javascript·es6
知兀8 小时前
Tailwindcss报错:没有与此调用匹配的重载
前端·c++·tailwindcss
计算机学姐8 小时前
基于SpringBoot的高校爱心慈善管理系统
java·vue.js·spring boot·后端·spring·tomcat·mybatis