若依Vue3图片预览大图遮罩层和表格的border css层级冲突

于 2024-03-14 16:27:14 发布
阅读量492 收藏
点赞数 3
分类专栏： 解决前端小问题 ruoyi前端小问题 文章标签： css vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44971069/article/details/136714323
版权
本文讲述了在HTML/CSS中遇到的样式层级问题，即表格层级高于图片。提供了两种解决方式：一是设置el-table的z-index为继承；二是尝试但未成功的方法，包括设置append-to-body和preview-teleported属性。
摘要由CSDN通过智能技术生成

样式层级出现问题，表格的层级高于图片的层级
在这里插入图片描述

1.解决方式一：设置此文件的该属性（z-index）为继承，则显示正常
.el-table .el-table__cell {
z-index: inherit;
}
在这里插入图片描述
2.解决方式二：将此属性设置为true(本人试了没有效果，记录在此)
（1）append-to-body=“true”
（2）preview-teleported=“true”
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/96c487c82bca46a4a744ddbbc0eda498.png

小叮当仁不让
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
若依前后端分离版本如何在表格中预览图片？
猿小白的博客
08-19 1602
默认的img组件不会携带不能被代理，通过封装的预览组件会自动携带会被代理。
若依框架（不分离板）———开发笔记
Rujh520的博客
04-12 367
一、表格内图片预览效果。
若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小（公告页面）
12-17
针对原版前台页面进行了简单修改，图片上传后可以拖拽修改图片大小
【若依(ruoyi)】图片预览
sayyy的专栏
11-30 6048
前言 若依(ruoyi)： v4.6.0 layui： 2.3.0 jQuery： v2.1.4 参考：https://sayyy.blog.csdn.net/article/details/109242637 图片预览 <img class="preview_image" src="http://xxx/xxx.png"> 为图片添加点击预览功能 $(function(){ $(".preview_image").click(function(){ previewIma
【若依(ruoyi)】表格图片预览功能图片超宽、超高问题
sayyy的专栏
10-23 6840
前言 若依(ruoyi)： v4.3 360极速浏览器 12.0.1550.0 (正式版本) （32 位） 操作系统 Windows 10 OS Version 2004 (Build 19041.572) JavaScript V8 7.8.279.23 jQuery v2.1.4 表格图片预览功能 若依(ruoyi)自带了一个表格图片预览功能。该功能可以在示例演示>表格>表格图片预览功能中找到。 表格图片预览功能图片超宽问题 表格图片预览功能遇到超宽图片（比如屏幕宽度1024px，图片
若依 分离版 组件 图片上传 预览
qq_49078070的博客
03-25 2705
若依分离版图片上传
前端面试题，包含了基础的css和vue原理面试题，带答案
12-20
前端面试题，包含了基础的CSS和Vue原理面试题，带答案 1. CSS 盒模型 CSS 盒模型是 CSS 中的一个基本概念，它将一个 HTML 元素分割成四个 Box：Content Box、Padding Box、Border Box 和 Margin Box。其中，...
前端面试题vue，css.,javascript
最新发布
02-02
### 前端面试知识点详解 ...以上内容涵盖了前端开发中较为重要的几个方面，包括 Vue.js、CSS 和 JavaScript 的核心概念和技术点。对于前端开发者而言，掌握这些知识点有助于提升项目开发效率和质量。
鼠标放到图片上显示图文提示效果
06-11
在网页设计中，实现“鼠标放到图片上显示图文提示效果”是一种常见的交互设计技术，它能够为用户提供更直观的信息展示，提升用户体验。这种效果通常被称为悬停提示（Tooltip）或下拉层（Dropdown）。在本案例中，...
vue实现移动端悬浮窗效果
12-08
在Vue.js中实现移动端的悬浮窗效果，主要是利用触摸事件（touchstart, touchmove, touchend, touchcancel）以及CSS的定位技术。首先，我们需要理解这些触摸事件在移动端的用法： 1. `touchstart`：当用户在触摸屏上...
vue2.0基于vue-cli+element-ui制作树形treeTable
11-30
在本文中，我们将深入探讨如何使用Vue 2.0、vue-cli和Element UI来创建一个树形的TreeTable组件。Vue CLI（Vue CLI 2.x）是一个强大的脚手架工具，它可以帮助开发者快速搭建规范化的Vue项目结构。Element UI则是一个...
基于若依VUE实现图片上传保存到数据库和下载预览功能
热门推荐
yuyuchi的博客
11-04 1万+
图片上传 前台代码 上传图片表单部分 <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px" enctype="multipart/form-data"> <el-form-item lab
【element】基于若依的基本图片上传，实现复制粘贴上传图片文件，带图片预览功能
前端代码小白的日常博客
06-16 1107
【代码】【element】基于若依的基本图片上传，实现复制粘贴上传图片文件，带图片预览功能。
【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题，OSS文件上传】
qq_45973421的博客
04-10 7396
使用若依框架进行项目开发的时会用到框架自带的代码生成功能，极大方便我们进行项目开发。基于框架开发肯定会有一些功能需要自行优化定制，在设计数据库表代码生成的同时有图片的展示需求，因此在若依框架中发现了图片在列表中回显不显示的问题，接下来我们看看如何解决该问题。提示：以下是本篇文章正文内容，下面案例可供参考每天总结一点经验，都会有量变的结果！
若依（ruoyi）前后端分离版使用教程之图片的上传与显示
蓝多多的小仓库
06-17 8169
目录1、数据库相应表中新增保存图片地址字段2、检查or修改application.yml 和CommonController中的文件路径3、确认src目录下的component目录中是否有ImagePreview和ImageUpload两个文件夹4、ruoyi-ui中的src目录下 main.js 引入全局组件挂载5、前后端上传图片与回显的实现6、效果展示 下图所示为本地磁盘位置，若上传服务器按照Windows或者是Linux配置书写即可：（如果下载的若依框架没有问题，默认这些都是有的，只是需要检查一下
vue图片显示
babyzbb636的博客
10-03 3670
最简单的方法是使用<img>标签，并将图片的URL作为src属性的值。如果是绝对路径，需要使用require函数，图片将从提供的URL加载并显示在页面上。
vue3+element plus图片预览点击按钮直接显示图片的预览形式
this_zq的博客
11-21 2239
不同的是，这里element plus并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_
el-image 和 el-table冲突层级冲突问题
weixin_43311271的博客
09-20 872
我在此不推荐这种解决方式，原因：此样式，会影响 单元格合并时 border显示bug。只需在加入preview-teleported 将插入地址定为body，即可解决。其中原理，很多博客已经所过了，table组件中使用图片，会出现层级过低问题，更好的解决方式其实就写在官方文档下方。网上大部分解决方式是 使用穿透。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值