Vue3+Element-plus的图片预览被表格覆盖的问题

最新推荐文章于 2024-05-16 10:07:37 发布
最新推荐文章于 2024-05-16 10:07:37 发布
阅读量2.9k 收藏 6
点赞数 5
分类专栏： element-plus 文章标签： elementui vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43369256/article/details/123444043
版权 
<template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]">
          </el-image>
        </template>

出现了这样的问题
在这里插入图片描述
尝试了element-plus的1.30-beta.5和1.30.beta.10版本依旧是这个问题
于是 尝试了旧一点版本的element-plus

选择了1.20-beta.6版本

npm install element-plus@1.2.0-beta.6

在这里插入图片描述
换了版本重新启动就好了
在这里插入图片描述

BANYAN三峡
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
vue3+element-plus点击列表中的图片预览时，图片被表格覆盖
“代码农”微信公众号
08-10 1486
vue3+element-plus点击列表中的图片预览时，图片被表格覆盖
Vue + ElementPlus 图片预览遮罩层异常
luyoo452470的博客
10-08 587
vue element plus 图片预览遮罩层异常显示问题
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript 基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能 vue-cli版： : vite版： : 系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和typescript，实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等 页面功能 列表页 列表页增删改改查 采用vue3 composition api typescript在项目中运用，提供类型检查 模拟数据，支持网络查看 请求接口返回数据用typescript泛型约束 vue3-element-plus-typescript yarn install 编译和热重装以进行开发
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 1335
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
element plus 的一个高版本bug：预览图片被表格覆盖问题解决
Brave_heart4pzj的博客
06-23 919
VUE+Element Plus
Element-ui解决table设置fixed属性后el-image组件样式被覆盖问题
yusha123的博客
05-25 2739
首先我还原一下车祸现场 这样没问题，当我点击人像的图片时就用到el-image这个组件了，然后你看，惨不忍睹 解决办法： .el-table__fixed-body-wrapper { z-index: auto !important; }
Element-ui 解决table设置fixed属性后 el-image组件放大图片样式被覆盖问题
还想做MAD
12-27 1933
Element-ui 解决table设置fixed属性后 el-image组件放大图片样式被覆盖问题 .el-table__fixed-body-wrapper { z-index: auto !important; }
【学习总结】关于vue中table表头加粗与遮挡问题
qq_22841387的博客
04-03 5591
table表头的修改遇到的问题解决方法详细解释 遇到的问题 我想实现的效果 但是我实际出现的效果 仔细观察，发现存在以下问题： 1.表头的背景与遮挡 2.加上边界 在项目中找到了对应的界面代码，发现特别简单，根本不存在实现这个效果的代码，于是找到了其导入的文件 界面的代码 很明显不存在我想要实现的效果的代码，于是找进了导入的文件oj-table 但翻看了几次代码依旧不知道如何实现的，就开始搜集去找相关资料。 解决方法 问题一(表头的背景与遮挡): 首先，我先去找如何是table表头的标题加粗找到了
vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
m0_52761651的博客
11-01 3185
vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
element-plus el-table el-table-column 组件中 使用插槽 加载 el-image 组件预览图片 层级过低问题
HHH917的博客
03-03 6108
问题复现 分析原因 可以发现 .image-viewer_wrapper 类名的元素是预览图片的盒子 有设置z-index：2006 但是还是被其余表格列表元素遮挡 说明el-image 的父元素的层级不够高 可以遮挡前面列表的元素 但是后面列表的元素无法遮挡 问题解决 1、可以动态给图片预览表格列表的元素设置更高的 z-index 层叠等级 但是 这样实现的方法比较复杂。 2、可以改变 .image-viewer_wrapper 产生层叠关系 (层叠上下文) 的参照元素 HTML中的根元素&
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7421
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
使用Vue3的element-plus的时候查看图片被其他的表格干扰
qq_44627822的博客
01-04 733
不知道怎么的，用element-plus里面的el-image组件写出来的，就变成这样了。首先想到的是，是不是因为我有什么属性没加啊，我拿着element-plus的el-image说明书打开看，试了几个属性，没发现问题。打开F12开发者模式去点进去看，看到底是怎么回事，这种数据展示出来了，但是有一些奇怪的显示问题，通常都是样式有问题。那么我们就要修改position这个样式，其实我也不知道position会有什么样式，但是就是不想他起作用~！用户会自己去找这个样式吗？把这个样式的钩去掉，欸，就好了！
Element-ui中的el-image的图片预览功能（:preview-src-list）
热门推荐
weixin_46753476的博客
07-11 3万+
今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是在表格上显示多张图片，当点击图片时，就预览当前点击的图片。 所以我将其修改了一下，将后端返回的图片依次渲染在页面上；功能就是当点击表格中的某个图片时，这个图片就被放大预览，且图片的显示是以轮播图的形式展现出来。.........
elementUi中的图片预览功能（图片放大、缩小）preview-src-list属性
huang_jimei的博客
10-12 1万+
一、图片有时候需要放大预览，放大后可支持放大缩小等功能，element中的preview-src-list属性可以实现。 二、主要代码： <el-form ref="verification" :model="verification" label-width="180px" class="elform"> <el-form-item label="产地合格证:" style="height:162px;"> <el-image v-for="item in
el-table滚动条设置及设置滚动条后多出空白列修改
最新发布
JunJiu0420的博客
05-16 87
空白列修改：给el-table-column设置适当的宽度，直到空白列消失。
vue3+element-plus
12-13
以下是使用Vue 3.0+Element-Plus开发后台管理系统的步骤： 1.首先，确保你已经安装了Node.js和npm包管理器。 2.使用以下命令安装Vue CLI 4： ```shell npm install -g @vue/cli ``` 3.使用Vue CLI创建一个新项目： ```shell vue create my-project ``` 4.在创建项目时，选择使用Vue 3.0版本，并启用class-style component语法： ```shell ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter, Unit ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: ESLint with error prevention only ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ``` 5.安装Element-Plus和Echarts 5.0： ```shell npm install element-plus [email protected] ``` 6.在main.js中引入Element-Plus和Echarts： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import echarts from 'echarts' const app = createApp(App) app.use(store) app.use(router) app.use(ElementPlus) app.config.globalProperties.$echarts = echarts app.mount('#app') ``` 7.现在你可以开始使用Element-Plus和Echarts来开发你的后台管理系统了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值