使用Vue3的element-plus的时候查看图片被其他的表格干扰

最新推荐文章于 2024-10-11 17:40:30 发布
最新推荐文章于 2024-10-11 17:40:30 发布
阅读量971 收藏 1
点赞数
分类专栏： 遇到的问题 前端 文章标签： 前端 vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44627822/article/details/128549713
版权
在使用Vue3的element-plus框架时，遇到el-image组件预览图片被表格遮挡的问题。通过调整el-image的z-index属性及移除组件自带的position样式，最终使用unset属性覆盖默认样式，成功解决了图片预览的显示异常。
摘要由CSDN通过智能技术生成

使用Vue3的element-plus的时候查看图片被其他的表格干扰

先上遇到的问题：
在这个表格里面添加一个图片进行展示
在这里插入图片描述
一点击图片就变成这样了。这什么玩意啊，真是个bug制造能手！
问题现象
不知道怎么的，用element-plus里面的el-image组件写出来的，就变成这样了。首先想到的是，是不是因为我有什么属性没加啊，我拿着element-plus的el-image说明书打开看，试了几个属性，没发现问题。自己挣扎了很久。最好发现有一个属性z-index，这个属性是在图片预览的时候的图层大小。然后他只是第一步。

打开F12开发者模式去点进去看，看到底是怎么回事，这种数据展示出来了，但是有一些奇怪的显示问题，通常都是样式有问题。

我们往里面找。发现这个element-plus的组件自带的position样式，是罪魁祸首！
在这里插入图片描述
把这个样式的钩去掉，欸，就好了！

最低0.47元/天 解锁文章
化尘埃
关注
专栏目录
Element-plus 图片预览，遮罩层显示问题
qq_53172341的博客
02-20 565
Element-plus 图片预览，遮罩层显示问题。
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 2000
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
Vue3+elementplus实现图片上传下载（最强实践）
weixin_73060959的博客
09-07 272
实现照片的上传，预览，以及转成以逗号隔开的图片地址，即时监听，并发送消息到父组件。引入图片上传子组件，接受消息，并实现挂载之后取消绑定事件，避免占用内存。
element-plus中el-table组件中插槽加载el-image 组件预览图片层级错乱问题
无心使然云中漫步
12-10 1759
element-plus中，使用el-table组件，在el-table-column组件中使用插槽中插槽加载el-image组件，点击图片预览时，层级会错乱。通过检查元素，可以发现class="image-viewer__wrapper"这个div是在渲染后td中，虽然有z-index，但是层级依然不正确。方式一：el-image添加preview-teleported属性。element-plus官网组件属性。
Web前端之Vue3+Element-Plus点击列表中的图片预览时被表格覆盖
CSDN博客主页地址：https://mengjian.blog.csdn.net/
08-10 1684
Web前端之Vue3+Element-Plus点击列表中的图片预览时被表格覆盖
Vue3+Element-plus的图片预览被表格覆盖的问题
weixin_43369256的博客
03-12 3215
<template #default="scope"> <el-image style="width: 100px; height: 100px" :src="scope.row.cover" :preview-src-list="[scope.row.cover]"> </el-image> </template> 出
[Vue3+Element-Plus]点击列表中的图片预览时，图片被表格覆盖。
SqlloveSyn的博客
11-07 1995
点击列表中的图片进行预览时，图片被表格覆盖的解决方案。
element plus 的一个高版本bug：预览图片被表格覆盖问题解决
Brave_heart4pzj的博客
06-23 1017
VUE+Element Plus
Vue3组件库element-plus 2.2.0版本特性解析
Element Plus 2.2.0 版本为Vue.js 3提供了一系列可复用的UI组件，包括按钮、表单、导航等基础组件，以及更为复杂的组件如数据表格、日历等。这些组件都遵循Vue 3的设计原则和最佳实践，实现了响应式、可组合的设计...
vue+element的表格中添加加减按钮的问题
09-05
在Vue.js和Element UI框架中，创建一个带有加减按钮的表格是一项常见的需求，尤其在数据管理和编辑场景中。这个功能模块旨在实现一种表格行内操作，允许用户通过加减按钮来动态增删数据，同时确保每行的操作独立，不...
对话框中使用el-input和el-tree做树形组件表单元素，解决点击其他区域树形组件无法自动收回的bug
qq_27470647的博客
04-01 3260
对话框中表单某一项以树的形式展示，点击el-input弹出el-tree树形组件后如果不继续点击选择树节点而是点击其他地方（或者直接关闭对话框），树形组件收不回去了（不能像下拉框表单一样自动隐藏收回去），这个是有解决办法的，通过给body绑定click事件，然后判断鼠标点击的dom(event.target)是不是点击弹出树形组件的那个input或者树形组件本身，如果不是，就让树形组件隐藏，如果是...
解决vue+elementUI中使用v-for循环出多个select下拉框，默认绑定，但改变一个下拉框，其余下拉框也会改变的问题
热门推荐
color_0716的博客
06-08 1万+
我要展示在页面的选择值是fruitsValueOptions里面的数据。 保存成功后，刷新页面。 这样写就不会出现v-model绑定的值相同的情况，展示的就是互不干扰的选择框。 【水果】栏里可以选择【橙子】or【猕猴桃】 【道具】栏里可以选择【叉子】 不会出现【水果】栏选择【橙子】后，道具一栏里也出现了【橙子】 下面是具体的步骤 后端返回数据： { "code":0, "message":"success", "data":[ { ...
使用element ui表格，导致图片放大预览层叠冲突问题
qq_45061876的博客
03-02 1428
之前在处理表格中的图片放大预览时 ，因为vue调用了element ui组件库的表格组件el-table，导致在使用图片放大预览时出现了样式重叠和冲突，看看之前的代码，这里我一开始用的时img标签。没有采用element ui的el-image，因为考虑到z-index方便在img上使用，然并卵，这个方法并不起作用。
【Element Plus】el-table中使用el-image图片预览被其他表格遮挡，使用z-index层级设置无效
最新发布
ming的博客
10-11 391
使用 Element Plus 开发项目时，发现在 el-table 中使用el-image的图片预览无法遮住全部的el-table-column
element ui e-image 和e-table一起使用显示问题
做笔记/记录遇到的前端bug
06-14 2097
完美解决eLement-plus组件库开发时,el-table与el-image相互层叠，样式冲突问题
记录一个使用element-plus表格的bug
q1553048604的博客
12-25 515
bug修复，虽然解决了，但希望大佬能讲解讲解原理
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7766
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
el-image 嵌套在表格中显示错误问题
lxc的点点滴滴
09-27 236
el-image嵌套表格、查看大图
element plus的el-image图片发布到nginx不显示
m0_60666921的博客
04-11 317
这时候使用el-image包裹的图片显示不了只能先改成原生img二级路由发布到nginx配置参考。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值