el-image 和 el-table冲突层级冲突问题

最新推荐文章于 2024-05-16 18:22:05 发布
最新推荐文章于 2024-05-16 18:22:05 发布
阅读量807 收藏 5
点赞数 5
分类专栏： 前端基础学习 vue element-plus 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43311271/article/details/133077199
版权

其中原理，很多博客已经所过了，table组件中使用图片，会出现层级过低问题，
网上大部分解决方式是 使用穿透

// 单元格样式
::v-deep(.el-table__cell) {
    position: static !important;
}

我在此不推荐这种解决方式，原因：此样式，会影响 单元格合并时 border显示bug
更好的解决方式其实就写在官方文档下方
在这里插入图片描述
只需在加入preview-teleported 将插入地址定为body，即可解决

<el-image :preview-src-list="srcList" fit="cover" preview-teleported />
空、
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table里面的el-image的lazy属性问题
schumyxp的专栏
06-02 1719
如果你不确定你的scroll-container的值应该写什么，就可以把里面的内容拿出来，用document.querySelector试一下，比如我的，就要试一下document.querySelector('#listTable .el-table__body-wrapper')，如果看到找到的div就是我们要的那个，就说明你找对了。但是这个时候，如果里面用到了el-image，会发现如果设置了lazy，也就是懒加载，图片是不会显示的。查了很多现成的文档，也问了ChatGPT，都没有好的答复。
el-image图片放大查看层级问题
最新发布
shi19970609的博客
05-16 276
添加:preview-teleported="true"即可。
element-plus el-table el-table-column 组件中 使用插槽 加载 el-image 组件预览图片 层级过低问题
HHH917的博客
03-03 6213
问题复现 分析原因 可以发现 .image-viewer_wrapper 类名的元素是预览图片的盒子 有设置z-index：2006 但是还是被其余表格列表元素遮挡 说明el-image 的父元素的层级不够高 可以遮挡前面列表的元素 但是后面列表的元素无法遮挡 问题解决 1、可以动态给图片预览表格列表的元素设置更高的 z-index 层叠等级 但是 这样实现的方法比较复杂。 2、可以改变 .image-viewer_wrapper 产生层叠关系 (层叠上下文) 的参照元素 HTML中的根元素&
element-plus中el-table组件中插槽加载el-image 组件预览图片层级错乱问题
无心使然云中漫步
12-10 1389
element-plus中，使用el-table组件，在el-table-column组件中使用插槽中插槽加载el-image组件，点击图片预览时，层级会错乱。通过检查元素，可以发现class="image-viewer__wrapper"这个div是在渲染后td中，虽然有z-index，但是层级依然不正确。方式一：el-image添加preview-teleported属性。element-plus官网组件属性。
el-image 嵌套在表格中显示错误问题
lxc的点点滴滴
09-27 174
el-image嵌套表格、查看大图
vue修改Element的el-table样式的4种方法
10-14
除了上述方法，还可以通过CSS类和深度选择器（如`.el-table__body tr:nth-child(n)`)来全局修改Element UI的el-table样式。但这种方法可能会受到Element UI内部样式的影响，可能需要更高的优先级或者使用`!important...
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
Element-ui解决table设置fixed属性后el-image组件样式被覆盖问题
yusha123的博客
05-25 2787
首先我还原一下车祸现场 这样没问题，当我点击人像的图片时就用到el-image这个组件了，然后你看，惨不忍睹 解决办法： .el-table__fixed-body-wrapper { z-index: auto !important; }
vue3 中table嵌套el-image查看大图 bug
m0_67206644的博客
10-14 586
vue3 + elementPlus 点击查看大图后，图片展示其他部位。 表格穿透到了图层上方。
VUE3 在element-plus的el-table组件中插槽加载el-image 组件预览图片层级错乱问题
不使疯
04-16 199
在element-plus的el-table组件中插槽加载el-image 组件预览图片层级错乱问题
VxeTable行编辑和Element-UI el-select和el-autocomplete的select事件冲突的问题
qq_37128840的博客
08-18 552
最后仔细查看了el-autocomplete这个组件的属性之后，发现popper-append-to-body属性默认是true，原来是每次点击select触发了取消行编辑导致点击没有选中，触发了取消行编辑和关闭poper导致，将popper-append-to-body属性改为false即可。在VxeTable行编辑中添加el-autocomplete的远程查询时出现点击查询结果无法回传值的问题。但是改为false后下拉框会被body覆盖，那么在el-autocomplete中的class中添加。
记一个vue 在el-table内嵌套el-select 无法点击选择的BUG解决办法
PiaoMiaoXiaodao的博客
02-04 5086
代码片段如下 正常情况下 我以为 压根不需要什么@change事件 按道理他自然就能修改表格下 行内的单元格数据 然而想法太美好了,浪费了我2个小时 期间找了N多办法没解决 如change内调用$forceUpdate $set之类的 BUG现象是这样的: el-select 怎么点击都无反应 但初始值是正常的 F12插件查看 父组件 el-table的属性 显示结果已经改变了 ch...
element-plus el-table el-table-column 组件中 使用插槽 加载 el-image 组件预览图片 出现层级穿透问题
m0_65382120的博客
07-30 953
取消试试能不能行，可以的话把这个标签复制下来。
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 1559
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
解决element ui el-img 和 el-table一起使用时出现显示叠加混乱
weixin_45155922的博客
12-29 660
解决element ui el-img 和 el-table一起使用时出现显示叠加混乱
el-image 层级过低
09-14
根据引用中提到的问题描述和解决方法，可以得出el-image的父元素层级不够高，导致被其他元素遮挡。解决方法是通过添加CSS样式来提高el-image的层级。具体的代码如下： ```css .image-viewer_wrapper { z-index: 2006; /* 提高层级 */ } ``` 此外，还可以根据引用中的代码片段来进一步解决问题。使用::v-deep选择器可以穿透组件样式作用域，将样式应用于el-image的子元素。以下是代码示例： ```css ::v-deep th.el-table__cell, ::v-deep td.el-table__cell { position: static; /* 子元素不与其产生新的层叠关系 */ } ``` 这样设置之后，el-image的层级应该会提高，不再被其他元素遮挡。希望这些解决方法对您有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值