当前位置： 首页 > news >正文

使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题

news 2025/7/6 21:21:22

在日常开发项目中 使用element-plus 中表格中使用 el-image的点击图片出现图片预览
会出现以下问题 表格一行会覆盖预览的图片
鼠标滑过也会显示表格 el-image 的预览层级和表格的层级冲突导致的。

在这里插入图片描述

解决方法：有两种一种是直接使用样式穿透 第二种推荐方法 使用官网推荐的 preview-teleported 属性

第一种解决方法：table样式穿透

::v-deep(.el-table__cell) {position: static !important;
}

第二种解决方法(官方推荐)：preview-teleported属性

在这里插入图片描述

<el-image:src="图片地址"fit="cover":preview-src-list="[图片地址]"preview-teleported
/>

注：此方法是官网推荐的方法 官网地址：链接: elment-pluse#Table表格 点击打开此链接鼠标拖动至最下方 有相关说明
在这里插入图片描述

相关文章：

使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题

在日常开发项目中 使用element-plus 中表格中使用 el-image的点击图片出现图片预览 会出现以下问题 表格一行会覆盖预览的图片 鼠标滑过也会显示表格 el-image 的预览层级和表格的层级冲突导致的。 解决方法&#xff1a;有两种一种是直接使用样式穿透 第二种推荐方法 使用官网推…...

编程日记 2024/11/22 5:15:21

python读取Oracle库并生成API返回Json格式

一、安装必要的库 首先&#xff0c;确保已经安装了以下库&#xff1a; 有网模式 pip install flask pip install gevent pi install cx_Oracle离线模式&#xff1a; 下载地址&#xff1a;https://pypi.org/simple/flask/ # a. Flask Werkzeug-1.0.1-py2.py3-none-any.whl J…...

编程日记 2024/11/22 5:06:12

音视频入门基础：MPEG2-TS专题（5）——FFmpeg源码中，判断某文件是否为TS文件的实现

一、引言 通过FFmpeg命令&#xff1a; ./ffmpeg -i XXX.ts 可以判断出某个文件是否为TS文件&#xff1a; 所以FFmpeg是怎样判断出某个文件是否为TS文件呢&#xff1f;它内部其实是通过mpegts_probe函数来判断的。从《FFmpeg源码&#xff1a;av_probe_input_format3函数和AVI…...

编程日记 2024/11/22 5:01:05

每天10个vue面试题(九)

1、如何在组件中批量使用Vuex的getter属性&#xff1f; 使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中computed:{ ...mapGetters([total,discountTotal]) } 2、vue2和vue3的区别&#xff1f; 双向数据绑定不同&#xff1a;vue2 的双向数据绑定…...

编程日记 2024/11/22 5:00:04

Jenkins的环境部署

day22 回顾 Jenkins 简介 官网Jenkins Jenkins Build great things at any scale The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project. 用来构建一切 其实就是用Java写的一个项目…...

编程日记 2024/11/22 4:59:03

八、鸿蒙开发-网络请求、应用级状态管理

提示&#xff1a;本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0鸿蒙NEXT星河版零基础教程课整理 链接指引 > 尚硅谷2024最新鸿蒙开发HarmonyOS4.0鸿蒙NEXT星河版零基础教程 文章目录 一、网络请求1.1 申请网络访问权限1.2 安装axios库1.2.1 配置环境变量1.2.2 第二步&…...

编程日记 2024/11/22 4:55:57

经验笔记：Git 中的远程仓库链接及上下游关系管理

Git 中的远程仓库链接及上下游关系管理 1. 远程仓库的链接信息 当你克隆一个远程仓库时&#xff0c;Git 会在本地仓库中记录远程仓库的信息。这些信息包括远程仓库的 URL、默认的远程名称&#xff08;通常是 origin&#xff09;&#xff0c;以及远程仓库中的所有分支和标签。…...

编程日记 2024/11/22 4:54:56

Paint 学习笔记

目录 ippaint 外扩对象 LCM_inpaint_Outpaint_Comfy&#xff1a; 不支持文字引导 ippaint https://github.com/Sanster/IOPaint 外扩对象 https://www.iopaint.com/models/diffusion/powerpaint_v2 GitHub - open-mmlab/PowerPaint: [ECCV 2024] PowerPaint, a versatile …...

编程日记 2024/11/22 4:52:53

Jenkins修改LOGO

重启看的LOGO和登录页面左上角的LOGO 进入LOGO存在的目录 [roottest-server01 svgs]# pwd /opt/jenkins_data/war/images/svgs [roottest-server01 svgs]# ll logo.svg -rw-r--r-- 1 jenkins jenkins 29819 Oct 21 10:58 logo.svg #jenkins_data目录是我挂载到了/opt目录&…...

编程日记 2024/11/22 4:50:52

kafka是如何做到高效读写

消息持久化&#xff1a; Kafka 将消息存储在磁盘上&#xff0c;并且通过顺序写入的方式提高写入性能。 消息被追加到日志文件的尾部&#xff0c;避免了随机写操作&#xff0c;从而提高了写入速度。零拷贝技术&#xff1a;利用操作系统的零拷贝特性&#xff0c;数据可以从磁盘直…...

编程日记 2024/11/22 4:49:51

Intern大模型训练营（九）：XTuner 微调实践微调

本节课程的视频和教程都相当清晰&#xff0c;尤其是教程&#xff0c;基本只要跟着文档&#xff0c;在开发机上把指令都相同地输出一遍&#xff0c;就可以完成任务&#xff08;大赞&#xff09;&#xff0c;相当顺利。因此&#xff0c;这里的笔记就不重复赘述步骤&#xff0c;更…...

编程日记 2024/11/22 4:48:50

从一次java.io.StreamCorruptedException: invalid stream header: 48656C6C 错误中学到的调试思路

问题场景&#xff1a; 在项目中&#xff0c;我试图使用 Java 的 ObjectInputStream 反序列化一个对象。代码逻辑看似简单&#xff1a;读取字节流&#xff0c;将其转为 Java 对象。然而&#xff0c;程序抛出了以下异常&#xff1a; java.io.StreamCorruptedException: invalid…...

编程日记 2024/11/22 4:46:47

树莓派的发展历史

树莓派&#xff08;Raspberry Pi&#xff09;是由英国的树莓派基金会开发的一系列单板计算机&#xff0c;其目标是为了促进计算机科学教育&#xff0c;同时提供廉价的计算机硬件平台。 1. 诞生背景与初代模型&#xff08;2006-2012&#xff09; 背景&#xff1a;树莓派的概念起…...

编程日记 2024/11/22 4:44:45

K8S containerd拉取harbor镜像

前言 接前面的环境 K8S 1.24以后开始启用docker作为CRI&#xff0c;这里用containerd拉取 参考文档 正文 vim /etc/containerd/config.toml #修改内容如下 #sandbox_image "registry.aliyuncs.com/google_containers/pause:3.10" systemd_cgroup true [plugins.…...

编程日记 2024/11/22 4:42:42

Ubuntu 环境下通过 Apt-get 安装软件

操作场景 为提升用户在云服务器上的软件安装效率&#xff0c;减少下载和安装软件的成本&#xff0c;腾讯云提供了 Apt-get 下载源。在 Ubuntu 环境下&#xff0c;用户可通过 Apt-get 快速安装软件。对于 Apt-get 下载源&#xff0c;不需要添加软件源&#xff0c;可以直接安装软…...

编程日记 2024/11/22 4:41:41

vue使用List.forEach遍历集合元素

需要遍历集合对其每个元素进行操作时&#xff0c;可以使用forEach方法 1.语法&#xff1a;集合.forEach ( 定义每一项 > 定义每一项都要进行的逻辑 ) 2、使用场景&#xff1a; //例如需要给每个员工的工资数量加1000this.personList.forEach(item>item.salary100…...

编程日记 2024/11/22 4:37:37

ROM修改进阶教程------安卓14去除修改系统应用后导致的卡logo验证步骤 适用安卓13 14 安卓15可借鉴参考

上期的博文解析了安卓14 安卓15去除系统应用签名验证的步骤解析。我们要明白。修改系统应用后有那些验证。其中签名验证 去卡logo验证 与可降级安装应用验证等等的区别。有些要相互结合使用。今天的博文将对修改系统应用后卡logo验证做个步骤解析。 通过博文了解💝💝�…...

编程日记 2024/11/22 4:34:32

苹果macbook，MacOS 11,12,13,14,15 跳过监管锁(配置锁)

第一步&#xff1a;进入恢复模式 长按电源键关机&#xff0c;再长按开机进入恢复模式。&#xff08;M&#xff0c;Intel芯片方法不同&#xff09; 第二步&#xff1a;复制代码 右上角联网&#xff0c;打开Safari&#xff0c;地址栏输入http://i7q.cn/61NWfQ。复制以下命令&am…...

编程日记 2024/11/22 4:30:29

【YOLOv8】安卓端部署-2-项目实战

文章目录 1 准备Android项目文件1.1 解压文件1.2 放置ncnn模型文件1.3 放置ncnn和opencv的android文件1.4 修改CMakeLists.txt文件 2 手机连接电脑并编译软件2.1 编译软件2.2 更新配置及布局2.3 编译2.4 连接手机 3 自己数据集训练模型的部署4 参考 1 准备Android项目文件 1.1…...

编程日记 2024/11/22 4:29:28

第二十四章 Spring之源码阅读——AOP篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…...

编程日记 2024/11/22 4:26:26

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/6/21 12:50:31

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/7/6 20:09:15

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/3 22:07:42

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/7/6 4:52:27

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/7/5 15:14:01

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/7/4 21:10:20

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/6/16 16:11:49

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/6/22 5:40:16