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>
相关推荐
cnsxjean2 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5672 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海3 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆3 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
莘薪3 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧4 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow
在路上`4 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员4 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
蒜蓉大猩猩4 小时前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
铅华尽4 小时前
前端---HTML(一)
前端