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

文章目录

  • 问题
  • 解决


问题

视觉

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


代码

<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px"><template #default="scope"><el-imagestyle="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属性。
elImage02
<el-image>中加入属性preview-teleported="true"即可。

<el-table-column label="商品图片" width="85px"><template #default="scope"><el-imagestyle="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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/60140.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React源码解析18(1)------ React.createElement 和 jsx

1.React.createElement 我们知道在React17版本之前&#xff0c;我们在项目中是一定需要引入react的。 import React from “react” 即便我们有时候没有使用到React&#xff0c;也需要引入。原因是什么呢&#xff1f; 在React项目中&#xff0c;如果我们使用了模板语法JSX&am…

MySQL单表查询

单表查询 素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 CREATE TABLE worker ( 部门号 int(11) NOT NULL, 职工号 int(11) NOT NULL, 工作时间 date NOT NULL, 工资 float(8,2) NOT NULL, 政治面貌 varch…

工程监测仪器振弦传感器信号转换器应用于隧洞监测

工程监测仪器振弦传感器信号转换器应用于隧洞监测 隧洞建设是重大工程项目&#xff0c;监测隧洞结构和环境的变化对确保隧洞安全和运行管理至关重要。工程监测仪器是实现隧洞监测的关键设备&#xff0c;其中振弦传感器和信号转换器是非常重要的组成部分。 振弦传感器是一种专门…

《Linux从练气到飞升》No.10 冯洛依曼体系结构

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

Finalshell连接Linux超时之Connection timed out: connect

目录 &#x1f349;前言 &#x1f33c;报错 &#x1f33c;摸索 &#x1f4aa;解决措施 &#x1f349;前言 &#xff08;1&#xff09;福利&#xff1a;花了2小时才解决的BUG&#xff0c;希望本篇文章能帮你10分钟解决&#xff01; &#xff08;2&#xff09;tips&#xff1…

Apache DolphinScheduler 3.1.8 版本发布,修复 SeaTunnel 相关 Bug

近日&#xff0c;Apache DolphinScheduler 发布了 3.1.8 版本。此版本主要基于 3.1.7 版本进行了 bug 修复&#xff0c;共计修复 16 个 bug, 1 个 doc, 2 个 chore。 其中修复了以下几个较为重要的问题&#xff1a; 修复在构建 SeaTunnel 任务节点的参数时错误的判断条件修复 …

windows 10 远程桌面配置

1. 修改远程桌面端口&#xff08;3389&#xff09; 打开注册表&#xff08;winr&#xff09;, 输入regedit 找到配置项【计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Terminal Server\Wds\rdpwd\Tds\tcp】 &#xff0c; 可以通过搜索“Wds”快速定位。 修改端口配…

斗轮机与程控站之间开关量双向无线通讯

斗轮堆取料机是一种对散料进行连续堆取作业的高效装卸大型机械,被广泛使用于火力发电厂和炼焦厂的输煤系统中。目前对斗轮机的技改主要为将斗轮机的部分程控信号改为无线传输&#xff0c;取代卷筒电机和电缆的应用。 多数情况下都是利用无线通讯做媒介&#xff0c;让工作人员通…

【腾讯云 Cloud Studio 实战训练营】快速构建React完成点餐H5页面

一&#xff0c;前言 1.1 相关链接 官网地址&#xff1a;Cloud Studio 官方文档地址&#xff1a;Cloud Studio&#xff08;云端 IDE&#xff09;简介 | Cloud Studio 1.2 Cloud Studio&#xff08;云端 IDE&#xff09;简介 Cloud Studio 是基于浏览器的集成式开发环境&#…

【Minecraft】Fabric Mod开发完整流程1 - 环境配置与第一个物品

前言 Fabric 是 Minecraft 一款非官方的模组 API,与 Forge mod 不同。它以轻量级和高性能为设计目标,专注于支持新版本的 Minecraft。 Fabric 和 Forge 在各自的加载编译流程上差别很大&#xff0c;所以你很难看见有同时支持二者的 mod&#xff0c;除非做了兼容性处理 Fabri…

day23-113. 路径总和ii

113. 路径总和ii 力扣题目链接(opens new window) 给定一个二叉树和一个目标和&#xff0c;找到所有从根节点到叶子节点路径总和等于给定目标和的路径。 说明: 叶子节点是指没有子节点的节点。 示例: 给定如下二叉树&#xff0c;以及目标和 sum 22&#xff0c; 思路 利用…

Rpc异步日志模块

Rpc异步日志模块作用 在一个大型分布式系统中&#xff0c;任何部署的分布式节点都可能发生崩溃&#xff0c;试想如果用普通的办法&#xff0c;即先排查哪个节点down掉了&#xff0c;找到down掉的节点后采取调试工具gdb调试该节点&#xff0c;进而排查宕机的原因。这中排查方法…