首页 > 其他分享 >[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖

[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖

时间:2024-04-24 13:44:47浏览次数:26  
标签:60px Element 图片 Plus scope preview true row

preview-teleported="true"

 

<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px">
<template #default="scope">
<el-image
style="width: 60px;height: 60px;"
:src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]"
hide-on-click-modal="true"
preview-teleported="true">
<template #error>
<div class="image-slot">
<el-icon><user /></el-icon>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>

标签:60px,Element,图片,Plus,scope,preview,true,row
From: https://www.cnblogs.com/alinelong/p/18155105

相关文章

  • Excel为批注设置图片背景 出现Bad Request - Request Too long
    Excel为批注设置图片背景  打开EXCEL点击文件 点选项 点击信任中心 点击信任中心设置 点击隐私选项 点击隐私设置 取消全部勾选  在填充效果中在选图片出现 点脱机工作  就可以正常先图片了......
  • source 1.5 中不支持 lambda 表达式, Deployment failed repository element
    1、java:[400,90]错误:-source1.5中不支持lambda表达式Failedtoexecutegoalorg.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile(default-compile)onproject原因是未指定版本,默认用jdk1.5在编译<plugins><!--指定maven编译的jdk版本,如果不指......
  • 在缩小浏览器宽度的时候,图片会超出li的宽度
    要确保在缩小浏览器宽度时,图片不会超出<li>元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于<li>元素。一种常见的方法是使用CSS中的max-width属性。下面是一个可能的解决方案:<liclass="list-group-item"><strong>问题描述:</strong><divclass="desc......
  • tinymce 5.X 和 6.X 富文本编辑器如何实现上传图片
    在项目中,前端会经常使用tinymce富文本编辑器插件,编辑器有上传图片的功能,而对于上传的这个图片的处理,有两种方式:编辑器中有一个images_upload_handler方法,上传图片会触发该事件,该事件有3个参数,分别是上传图片的文件内容、上传成功的success处理方法、上传失败的failure处理方法。......
  • Markdowmtoblog 文件图片上传
    pycnblog博客园上传markdown文件https://www.cnblogs.com/df888/p/11826480.html注意博客园6.21更新,MetaWeblog现在不支持密码登录,需要通过访问令牌(accesstoken)登录,在博客后台设置页面,允许MetaWeblog博客客户端访问,下方有MetaWeblog访问令牌,点击查看,创建访问令牌。功能一......
  • 把CIFAR-10数据集分类保存成图片
    一:cifar10数据集简介CIFAR-10数据集是一个广泛用于计算机视觉领域的数据集,主要用于图像分类任务。该数据集由Hinton的学生AlexKrizhevsky和IlyaSutskever整理得到。它包含10个不同类别的RGB彩色图片,每个图片的尺寸为32×32像素。这10个类别分别是飞机(airplane)、汽车(automobil......
  • elementplus中标签页操作
    操作包括关闭所有、关闭其他、向右关闭、向左关闭页面代码<el-tabsv-model="activeName"type="card"class="demo-tabs"@tab-remove="tabRemove"@tab-change="clickTab"><el-t......
  • springboot~mybatis-plus中使用TypeHandler做类型映射
    mybatis-plus中,如果数据表字段类型与java实体字段类型不一样,这时就需要做类型映射与转换了,我们一般可以实现TypeHandler接口,或者继承抽象类BaseTypeHandler,我们下面举例来说明一下它的使用方法。场景数据表里字段是varchar,java里是List集合,例如:我的爱好标签数据表里字段是varc......
  • 使用@MultipartConfig上传图片文件
    @MultipartConfig是JavaServletAPI的一部分,主要用于处理HTTP的multipart/form-data类型的请求,这种请求通常用于文件上传。当你在Servlet或JSP页面中使用@MultipartConfig时,你告诉容器这个Servlet或JSP页面将处理文件上传。@MultipartConfig(location="C:/Users/Administrator......
  • mybatisplus分页中,模糊匹配一个字符串在列a或者列b下都可以筛选出的写法
    话不多说,直接上代码,and那句就对了LambdaQueryWrapper<类>wrapper=newLambdaQueryWrapper<类>().in(逻辑内容).like(正常逻辑内容).and(wrapperNew->wrapperNew.like(StringUtils.isNotEmpty(filter.getLocation()),......