vue使用Element-plus的Image预览时样式崩乱

news2024/11/16 15:50:50

 🔥博客主页: 破浪前进
🔖系列专栏: Vue、React、PHP
❤️感谢大家点赞👍收藏⭐评论✍️


在这里插入图片描述

问题:

在使用组件库的image时出现了点小问题,预览的图片层级反而没有表格的层级高

效果图:

可以看见我的样式崩乱了,层级混乱

经过F12的查找发现:图片预览的div它的层级并不是最高的,后来查阅官方的Api的时候发现了一个不起眼的属性
preview-teleported
这个属性不得了了啊,看官方介绍

这不就解决了吗!!

最终代码如下:

<el-table-column prop="img" label="店铺图片">
							<template #default="scope">
								<el-image
									style="width: 100px; height: 100px"
									:src="`http://xxxxx` + scope.row.img"
									:zoom-rate="1.2"
									:max-scale="7"
									:min-scale="0.2"
									:preview-src-list="[`http://xxxxx` + scope.row.img]"
									:initial-index="4"
									fit="cover"
									preview-teleported="true"
								/>
							</template>
效果:

ok,解决,下个Bug见

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FL Studio21最新中文汉化解锁版,2024怎么激活FL Studio

FL Studio2024最新中文汉化解锁版是一款功能强大的数字音频工作站&#xff08;DAW&#xff09;&#xff0c;它广泛应用于音乐创作和音乐制作领域。在使用FL Studio时&#xff0c;购买正版软件是否有必要呢&#xff1f;本文将详细探讨FL Studio的功能特点以及正版软件的重要性。…

【C++那些事儿】内联函数,auto,以及C++中的空指针nullptr

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;我之前看过一套书叫做《明朝那些事儿》&#xff0c;把本来枯燥的历史讲的生动有趣。而C作为一门接近底层的语言&#xff0c;无疑是抽象且难度颇…

【电路笔记】-电路中的复数与相量(Phasor)

电路中的复数与相量(Phasor) 文章目录 电路中的复数与相量(Phasor)1、概述2、复数定义3、复数计算规则4、电子领域的复数5、总结 复数是一种重要的数学工具&#xff0c;广泛应用于包括电子学在内的许多物理领域。 这个概念可能看起来很奇怪&#xff0c;但它们的操作很简单&…

鸡尾酒学习——薄荷夏日

1、材料&#xff1a;冰块&#xff08;或者雪莲&#xff09;、牛奶、朗姆酒、绿薄荷糖浆&#xff1b; 2、口感&#xff1a;有点像是再吃薄荷奶糖口味的酒心奶糖。 3、视觉效果&#xff1a;白色加上一点点绿色&#xff1b; 4、步骤&#xff1a; &#xff08;1&#xff09;向摇壶内…

如何使用react-router v6快速搭建路由?

前言 之前一直使用react-router V5&#xff0c;上次搭建一个小项目&#xff0c;下载的react-router V6&#xff0c; 本以为没什么区别&#xff0c;就按照v5的那一套用了&#xff0c;区区小功能&#xff0c;奈何不了我的。然后自信满满的运行&#xff0c;哦豁&#xff0c;不生效…

foo = foo || bar 的深入解析

目录 前言 用法 代码示例 理解 注意点 结论 前言 在JavaScript中&#xff0c;foo foo || bar 是一种常见的编程模式&#xff0c;用于设置变量的默认值或者确保变量被赋值。这种写法利用了JavaScript中逻辑运算符的短路特性&#xff0c;即在逻辑运算中&#xff0c;一旦结…

docker - window Docker Desktop升级

文章目录 前言docker - window Docker Desktop升级 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来…

通过el-tree 懒加载树,创建国家地区四级树

全国四级行政地区树数据库sql下载路径&#xff1a;【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm1001.2014.3001.5503 我在后台获取地区信息添加了限制&#xff0c;只获取parentid为当前的地…

使用 jdbc 技术升级水果库存系统(后端最终版本,不包含前端)

1、配置依赖 <dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.10</version></dependency><dependency><groupId>junit</groupId><…

释放搜索潜力:基于ES(ElasticSearch)打造高效的语义搜索系统,让信息尽在掌握[1.安装部署篇--简洁版],支持Linux/Windows部署安装

搜索推荐系统专栏简介&#xff1a;搜索推荐全流程讲解&#xff08;召回粗排精排重排混排&#xff09;、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战&#xff08;含码源&#xff09; 专栏详细介绍&#xff1a;搜索推荐系统专栏简介&#xff1a;搜索推荐全流程讲…

基于springboot零食商城管理系统

功能如图所示 摘要 这基于Spring Boot的零食商城管理系统提供了强大的购物车和订单管理功能。用户可以在系统中浏览零食产品&#xff0c;并将它们添加到购物车中。购物车可以保存用户的选购商品&#xff0c;允许随时查看已选择的商品和它们的数量。一旦用户满意&#xff0c;他们…

Geom2d_OffsetCurve解析

Geom2d_OffsetCurve (const Handle< Geom2d_Curve > &C, const Standard_Real Offset, const Standard_Boolean isNotCheckC0Standard_False) chatgpt解析&#xff1a;Geom2d_OffsetCurve 是 OpenCascade 中的函数&#xff0c;用于构造偏移曲线。下面是对该函数的参…

CDR和AI哪个软件更好用?

设计软件市场中&#xff0c;CorelDRAW和Adobe Illustrator&#xff08;简称AI&#xff09;无疑是两大重量级选手。它们各自拥有庞大的用户群和丰富的功能&#xff0c;但究竟哪一个更好用&#xff1f;本文将从多个角度出发&#xff0c;对这两款软件进行全面而深入的比较&#xf…

编曲宿主软件哪个更好用?

音乐编曲软件的出现使得音乐创作者能够克服时间和空间的限制&#xff0c;随时随地进行创作。随着信息时代的发展&#xff0c;使用编曲软件已成为音乐创作领域的主流。那么编曲软件哪个好用呢&#xff1f;我推荐这三款。 在业内&#xff0c;常用的音乐编曲软件包括Cubase、Logi…

RHCE8 资料整理(四)

RHCE8 资料整理 第四篇 存储管理第13章 硬盘管理13.1 对磁盘进行分区13.2 交换分区&#xff08;swap分区&#xff09; 第14章 文件系统14.1 了解文件系统14.2 了解硬链接14.3 创建文件系统14.4 挂载文件系统14.5 设置永久挂载14.6 查找文件14.7 find的用法 第15章 逻辑卷管理15…

QWidget|QFrame设置背景透明且可以带有边框颜色

QWidget|QFrame设置背景透明且可以带有边框颜色 《Qt》part 6 QSS Qt样式表——界面美化1【QT】QSS美化——基础知识Chapter1 QWidget|QFrame设置背景透明且可以带有边框颜色参考链接Chapter2 Qt 中设置窗体(QWidget)透明度的几种方法1. 设置窗体的背景色2. 使用函数 Chapter3 …

使用端口转发来访问集群中的应用

使用端口转发来访问集群中的应用 个人k8s集群信息&#xff1a; rootk8s-master:~# kubectl get nodes -o wide NAME STATUS ROLES AGE VERSION INTERNAL-IP EXTERNAL-IP OS-IMAGE KERNEL-VERSION CONTAINER-RUNTIM…

【源码】智慧导诊系统:告别排队等候,快速预约科室挂号!

去医院看病该挂什么科&#xff1f; 不知道该挂什么科我该问谁&#xff1f; 看到茫茫的排队就诊人群&#xff0c;心里绝望怎么办&#xff1f; 医院内部结构复杂&#xff0c;我要去的科室在哪里&#xff1f; 所有人都去咨询前台&#xff0c;前台压力大&#xff0c;患者也只 …

【ARM Trace32(劳特巴赫) 使用介绍 2 -- Trace32 cmm 脚本基本语法及常用命令】

文章目录 Trace32 CMM 概述1.1 Trace32 系统命令 SYStem1.1.1 Trace32 SYStem.CONFIG1.1.2 SYStem.MemAccess1.1.3 SYStem.Mode1.1.3.1 TRST-Resets the JTAG TAP controller and the CPU internal debug logic1.1.3.2 SRST- Resets the CPU core and peripherals 1.2 Trace32 …

原生mysql与mybatis执行update语句的差异

在做一个解除绑定的接口中&#xff0c;发现了这个一个问题&#xff1a; 连续对接口进行测试&#xff0c;发现一直fan返回解除成功&#xff0c;但是逻辑上应该是解除之后&#xff0c;在解除它后就应该回显已解除绑定才对 就一直找原因&#xff0c;sql中使用的是mybatis的…