vue3+element-plus点击列表中的图片预览时,图片被表格覆盖

文章目录


问题

视觉


点击图片进行预览,但还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行的效果。


代码

html 复制代码
<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px">
	<template #default="scope">
		<el-image
			style="width: 60px;height: 60px;"
			:src="scope.row.avatar"
			:preview-src-list="[scope.row.avatar]"
			hide-on-click-modal="true">
				<template #error>
					<div class="image-slot">
						<el-icon><user /></el-icon>
					</div>
				</template>
		</el-image>
	</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>

解决

官网文档有这么一个属性,官网是这个描述的Image属性。

<el-image>中加入属性preview-teleported="true"即可。

html 复制代码
<el-table-column label="商品图片" width="85px">
	<template #default="scope">
		<el-image
			style="width: 60px; height: 60px;"
			:src="scope.row.avatar"
			:preview-src-list="[scope.row.avatar]"
			hide-on-click-modal="true"
			preview-teleported="true">
		</el-image>
	</template>
</el-table-column>
相关推荐
中微子33 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z42 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵1 小时前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店1 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
20261 小时前
11. vite打包优化
前端·javascript·vite