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

在日常开发项目中 使用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表格 点击打开此链接鼠标拖动至最下方 有相关说明
在这里插入图片描述

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

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

相关文章

vue--响应式数据

1、建一个vue应用程序&#xff08;简约&#xff09; 引入外链式 <title>第一个Vue程序</title><script src"../vue.global.js"></script> </head> {{}}插值表达式 <body><!-- {{ }} 插值表达式, 可以将 Vue 实例中定义的…

Flutter:photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览&#xff0c;支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…

React面试宝典

React Diff 在 React 中,diff 算法需要与虚拟 DOM 配合才能发挥出真正的威力。react 会使用 diff 算法计算出虚拟 DOM 中真正发生变化的部分&#xff0c;并且只会针对该部分进行 dom 操作&#xff0c;从而避免了对页面进行大面积的更新渲染&#xff0c;减少性能的开销。 Reac…

脚手架vue-cli,webpack模板

先安装node.js&#xff0c;它是服务器端&#xff0c;用于给页面提供服务。前端学习不需要会node.js&#xff0c;只需要学会node.js衍生出来的npm命令即可。 npm 是node.js的一个工具&#xff0c;作用是进行包管理&#xff0c;npm是node.js的包管理器。 接着安装脚手架&#xff…

二叉搜索数(二叉排序树、二叉查找树)-----详解

C系列—二叉搜索树 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 前言 一、二叉搜索树 1.1、二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&…

SPSS统计学:全距

概念 全距&#xff0c;也被称为极差&#xff0c;是统计学中衡量数据变异程度的一项指标。它代表了一组数据中最大值和最小值之间的差距&#xff0c;计算方式为最大值减去最小值。 用途 全距直观地揭示了总体内数值变化的幅度&#xff0c;或者说是标志值差异的范围&#xff0…

飞米仕智能门锁:以科技之名,重塑未来家居安全新篇章

在智能科技日新月异的今天&#xff0c;家居安全已悄然迈入了一个全新的智能化时代。近日&#xff0c;飞米仕智能门锁在杭州未来科技城举办了一场盛大的新品发布会&#xff0c;正式推出了其高端旗舰产品——飞米仕智能门锁K10系列。K10系列分为尊享版和旗舰版&#xff0c;售价分…

基于Java Springboot旅游民宿信息管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

SpringBoot - spring.profiles.active最佳实践

文章目录 Pre概述为什么需要多环境配置多环境配置实现步骤1. 配置文件准备2. 激活特定环境方法1&#xff1a;命令行参数方法2&#xff1a;环境变量方法3&#xff1a;IDE 配置方法4&#xff1a;全局配置文件默认设置 3. 配置文件加载顺序配置生效的原理 4. 常见问题多个配置文件…

详细描述一下Elasticsearch索引文档的过程?

大家好&#xff0c;我是锋哥。今天分享关于【详细描述一下Elasticsearch索引文档的过程&#xff1f;】面试题。希望对大家有帮助&#xff1b; 详细描述一下Elasticsearch索引文档的过程&#xff1f; Elasticsearch的索引文档过程是其核心功能之一&#xff0c;涉及将数据存储到…

03 —— Webpack 自动生成 html 文件

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 安装 npm install --save-dev html-webpack-plugin 下载html-webpack-plugin本地软件包 npm i html-webpack-plugin --save-dev 配置webpack.config.js让webpack拥有插件功能 const HtmlWebpack…

如何控制自己玩手机的时间?两台苹果手机帮助自律

对一些人来说&#xff0c;被智能手机“绑架”是一件心甘情愿的事&#xff0c;和它相处的一天中&#xff0c;不必面对现实的压力&#xff0c;它就像个“舒适区”。这是因为在使用手机的过程中&#xff0c;应用程序&#xff08;尤其是游戏和社交媒体应用&#xff09;会不断刺激大…

解决“400 Bad RequestThe plain HTTP request was sent to HTTPS portnginx/1.23.1”

目录 一、问题描述 二、问题解决 三、问题原因 &#xff08;1&#xff09;问题成因 &#xff08;2&#xff09;那为什么访问其他网站的时候&#xff0c;其不会出错呢&#xff1f;而且自己会用https协议&#xff1f; 一、问题描述 在浏览器直接输入&#xff1a;“xxx.xxx.x…

有趣的跳马问题与最优路径

献给皮鞋&#x1f45e;经理 有一个无限大的棋盘&#xff0c;在某个点有一个只能走日的马&#xff0c;计算马到达棋盘上任意一个点 P(x, y) 最小步数。 “走日” 规则下&#xff0c;任意坐标的 “马” 是否可达任意其它坐标需要证明。按照递归原则&#xff0c;只需证明 “马” …

IDEA自定义文件打开格式

介绍在IDEA中自定义文件打开格式的方法&#xff0c;比如一个文件&#xff0c;可以选择用txt格式打开&#xff0c;也可以选择用xml格式打开&#xff0c;也可以用java格式打开等等&#xff0c;通过这个方法可以方便的用任意格式在idea中打开想要打开的文件。 下面分别讨论三种不…

百度智能云千帆大模型平台引领企业创新增长

本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容&#xff0c;请访问&#xff1a; https://baiduworld.baidu.com 首先&#xff0c;跟大家分享一张图&#xff0c;这个是我们目前大模型应用落地的场景分布。可以看到&#xff0c;大模型…

【蓝桥杯C/C++】翻转游戏:多种实现与解法解析

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 &#x1f4af;题目&#x1f4af;问题分析解法一&#xff1a;减法法解法二&#xff1a;位运算解法解法三&#xff1a;逻辑非解法解法四&#xff1a;条件运算符解法解法五&#xff1a;数组映射法不同解法的比较…

第二十一章 Spring之假如让你来写AOP——Weaver(织入器)篇

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

04 - Clickhouse-21.7.3.14-2单机版安装

目录 一、准备工作 1、确定防火墙处于关闭状态 2、CentOS 取消打开文件数限制 3、安装依赖 4、CentOS取消SELINUX 二、单机安装 2.1、下载安装 2.2、安装这4个rpm包 2.3、修改配置文件 2.4、启动服务 2.5、关闭开机自启 2.6、使用Client连接server 一、准备工作 1…

Python脚本-linux远程安装某个服务

需求&#xff1a; 某公司因为网站服务经常出现异常&#xff0c;需要你开发一个脚本对服务器上的服务进行监控&#xff1b;检测目标服务器上是否存在nginx软件(提供web服务的软件)&#xff0c;如果不存在则安装(服务器可能的操作系统Ubuntu24/RedHat9)&#xff1b;如果nginx软件…