使用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表格 点击打开此链接鼠标拖动至最下方 有相关说明

相关推荐
Wh1teR0se37 分钟前
[极客大挑战 2019]Secret File--详细解析
前端·web安全·网络安全
ZhaiMou2 小时前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
code_shenbing5 小时前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
辽辽无期5 小时前
element ui table进行相同数据合并单元格
vue.js
北极糊的狐5 小时前
vue使用List.forEach遍历集合元素
前端·javascript·vue.js
辽辽无期5 小时前
element ui 搜索框中搜索关键字标红展示
vue.js
晓看天色*5 小时前
[JAVA]MyBatis框架—获取SqlSession对象
java·开发语言·前端
小林学习编程6 小时前
Springboot + vue 健身房管理系统项目部署
vue.js·spring boot·后端
ZVAyIVqt0UFji6 小时前
Reactflow图形库结合Dagre算法实现函数资源关系图
开发语言·前端·javascript·ecmascript