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

9月前作者：牧码岛分类：Toy博客阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3+element-plus点击列表中的图片预览时，图片被表格覆盖。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

视觉

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

代码

<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"即可。文章来源地址https://www.toymoban.com/news/detail-647104.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>

到了这里，关于vue3+element-plus点击列表中的图片预览时，图片被表格覆盖的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能三一

1.1 头部是一个面包屑（Breadcrumb）导航区域 1.2 白色区域是一个卡片（Card）视图 1.3 卡片（Card）视图中嵌套了输入框（Input ）、按钮（Button）、表单（Form）、分页（Pagination ） Breadcrumb 面包屑 | Element Plus (gitee.io) https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 2.1.1 复制

2023年04月09日
浏览(59)
Vue3+Element-Plus中的Tree组件，多选时的赋值与取值

el-tree 是 element-ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-tree 组件提供了 getCheckedNodes 方法，可以用来获取树形结构中被选中的节点。

2024年02月14日
浏览(50)
vue3 - element-plus 上传各种 word pdf 文件、图片视频并上传到服务器功能效果，示例代码开箱即用。

在 vue3 项目中，使用 element plus 组件库的 el-upload 上传组件，进行文件、图片图像的上传功能示例。可直接复制，再改个接口地址。在这里上传

2024年02月15日
浏览(78)
el-table点击表格某一行添加到URL参数，访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]

需求：有个表格列出了一些行数据，每个行数据点击后会加载出对应的详细数据，想要在点击了某一行后，能够将该点击反应到URL中，这样我复制这个URL发给其他人，他们打开时也能看到同样的行数据。 url会根据点击动态更新，大概是这样 xxx.com?param1=var1param2=var2 主要版本

2024年02月14日
浏览(63)
vue3使用element-plus

element-ui 是配合 vue2 使用，element-plus 是配置 vue3 使用的 1. 包管理器的方式如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标声明使用 ElementPl

2024年02月08日
浏览(80)
Vue3导入Element-plus方法

先引入依赖 main.js中要引入两个依赖然后这个东西我们最好还是挂载vue上所以还是然后我们可以在组件上试一下用一个ElementUi的表格组件参考代码如下运行结果如下也是没有任何问题

2024年02月06日
浏览(56)
vue3项目搭建并配置element-plus

安装完成后，输入如下指令查看vue的版本：选择一个要存放项目的目录，打开小黑窗输入如下命令：一开始输入项目名称或者默认vue-project，然后根据需求选择Yes/No 生成完项目后，输入如下指令： src/main.js里引入 index.css的文件位置根据实际情况写，也有可能是 const app后面加

2024年02月13日
浏览(62)
vue3+element-plus上传文件，预览文件

vue3+ts+element-plus上传文件，预览文件场景：使用element-plus的el-upload标签，手动上传文件,可预览docx,xlsx,pdf,jpg,jpeg,png(本地资源以及网络资源）。 1、使用el-upload标签检查上传文件的文件格式与大小上传的附件信息在fileList中，组装接口所需数据进行上传使用docx-preview插件预览

2024年02月11日
浏览(57)
Vue3 封装 element-plus 图标选择器

效果一：效果二：效果一的这个是把全部的icon图标都让它显示出来，让我们自己选择说选图标 2.1. 全局注册 icon 组件 2.2. 组件实现 2.3. 使用效果二的这个是渲染后端返回的icon图标 3.1. 全局注册 icon 组件 3.2. 组件实现 3.3. 使用

2024年02月07日
浏览(101)
vue3 element-plus动态菜单及动态图标

引入element-plus 注册图标组件动态引入图标代码完整代码路由如下

2024年01月18日
浏览(47)