element plus 表格组件怎样在表格中显示图片

官方给的:

<el-table-column label="Thumbnail" width="180">
    <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-image :preview-src-list="srcList"/>
        </div>
    </template>
</el-table-column>

实际应用中的:

首先获取数据中的img

在组件中绑定:

手动绑定scope ;要获取数据中当前行的img,只需要绑定 scope.row.img 即可(img是字段名)

组件完整代码:

<el-table-column label="景区图片" width="240">
    <template #default="scope">
        <el-image style="width: 100px; height: 80px; padding: 5px;" :src="scope.row.img" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.img]" :initial-index="4" fit="cover" />
    </template>
</el-table-column>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/301545.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Thrift

官网&#xff1a;Apache Thrift - Home tutorial&#xff1a;Apache Thrift - Index of tutorial/ 游戏匹配服务 服务分为三部分&#xff1a;分别是game&#xff0c;match_system&#xff0c;save_servergame为match_client端&#xff0c;通过match.thrift接口向match_system完…

QT如何修改项目名称

#打开项目 这里以项目start1为例 修改start1为hds 首先删除这个文件 之后打开CmakeLists.txt文件修改里面的项目名称把里面含有start1的全部写成hds。一般是3个地方 重新打开hds文件 configure Project一下 可以看到跑出来是一样的。到此项目的名称就改过来了。

spring-boot项目启动类错误: 找不到或无法加载主类 com.**Application

问题&#xff1a;Springboot项目启动报错&#xff1a;错误: 找不到或无法加载主类 com.**Application 解决步骤&#xff1a; 1.File–>Project Structure 2.Modules–>选中你的项目–点击“-”移除 3.重新导入&#xff1a;点击“”号&#xff0c;选择Import Module&…

linux-6.0 内核存储栈全景图

linux 存储栈原图地址&#xff1a;https://www.thomas-krenn.com/en/wiki/Linux_Storage_Stack_Diagram

Linux下配置静态ip地址

问题&#xff1a;虚拟机重启后ip地址动态更新&#xff0c;导致连shell十分麻烦 解决&#xff1a; 1. 进入配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 2.1 修改配置 BOOTPROTOstatic ONBOOTyes2.2 新增配置 #ip地址(自定义) IPADDR192.168.149.131 #子网掩码 …

苹果怎么录制屏幕?这个技能你值得拥有!

苹果设备广受欢迎&#xff0c;而其中一个强大的功能就是屏幕录制。无论是记录游戏过程、演示操作步骤&#xff0c;还是创作教学视频&#xff0c;苹果都提供了多种方式来满足用户的屏幕录制需求。可是您知道苹果怎么录制屏幕吗&#xff1f;本文将深入介绍两种在苹果设备上进行屏…

Simpy简介:python仿真模拟库-02/5

一、说明 关于python下的仿真库&#xff0c;本篇为第二部分&#xff0c;是更进一步的物理模型讲解&#xff0c;由于这部分内容强依赖于第一部分的符号介绍&#xff0c;因此&#xff0c;有以下建议&#xff1a; 此文为第二部分&#xff0c;若看第一部分。建议查看本系列的第一部…

群晖Synology Drive同步文件时过滤指定文件夹“dist“, “node_modules“

群晖Synology Drive同步文件时过滤指定文件夹"dist", “node_modules” mac用户 安装Synology Drive创建同步任务修改Synology Drive配置 打开/Users/[用户名]/Library/Application Support/SynologyDrive/data/session/[同步任务序号&#xff0c;第一个同步任务就…

在docker上运行LCM

目录 1.加载镜像并进入容器 2.安装依赖 3.在docker外部git-clone lcm 4.将get-clone的lcm复制到容器中 5.编译库 6.将可执行文件复制到容器中 7.进入可执行文件 8.编译可执行文件 9.再开一个终端运行程序 10.将以上容器打成镜像并导出 1.加载镜像并进入容器 sudo do…

云卷云舒:【实战篇】对象存储迁移

云卷云舒&#xff1a;【实战篇】MySQL迁移-CSDN博客 1. 简介 对象存储与块存储、文件存储并列为云计算三大存储模型。提供海量存储空间服务&#xff0c;具备快速的数据存取性能、高可靠和数据安全性&#xff0c;通过标准的RESTful API接口和丰富的SDK包来提供服务&#xff0c…

红日靶场 4

靶场配置 ​ 733 x 668899 x 819 ​ ​ 733 x 6161466 x 1232 ​ ​ 733 x 6261449 x 1237 ​ ​ 733 x 6301450 x 1247 ​ IP 地址分配&#xff1a; Win7: 192.168.183.133(内网)Ubuntu: 192.168.183.134(内网) 192.168.120.137(外网)DC: 192.168.183.130(内网)Kali…

springboot+ipage分页频繁请求会报错 自动添加多一个limit

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near LIMIT 500 at line 3 这个原因是因为springboot配置mysql的连接池太…

Xshell连接Ubuntu失败

错误&#xff1a; Xshell连接Ubuntu失败。 Connecting to 192.168.xx.xxx:22…Could not connect to 192.168.xx.xxx’ (port 22): Connection failed. 解决方案&#xff1a;边解决&#xff0c;边测试Xshell是否可以连接 1、SSH 服务未启动&#xff1a; 确保 Ubuntu 上的 S…

多线程执行后台任务,提供效率

场景&#xff1a; 大批量复制物料描述到新的物料上&#xff0c;多线程同时执行已提高效率 REPORT zmm316. INCLUDE zmm316_top. INCLUDE zmm316_f01. *----------------------------------------------------------------------- I N I T I A L I Z A T I O N *------------…

【STM32】STM32学习笔记-USART串口外设(26)

00. 目录 文章目录 00. 目录01. 串口简介02. 串口协议03. USART简介04. USART框图05. USART基本结构06. 数据帧07. 起始位侦测08. 数据采样09. 波特率发生器10. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便…

Redis内存策略:「过期Key删除策略」+ 「内存淘汰策略」

Redis之所以性能强&#xff0c;最主要的原因就是基于内存存储&#xff0c;然而单节点的Redis其内存大小不宜过大&#xff0c;否则会影响持久化或主从同步的性能。 Redis内存满了&#xff0c;会发生什么&#xff1f; 在Redis的运行内存达到了某个阈值&#xff0c;就会触发内存…

java基础之set集合练习(HashSet,LinkedHashSet,TreeSet)

1&#xff1a;完成以下填空&#xff1a; Collection 接口的特点是 存放list与set共性内容 没有直接实现类 没有明确的存储特点要求 ; 2&#xff1a;List 接口的特点是元素 有 &#xff08;有|无&#xff09;顺序&#xff0c; 可 &#xff08;可以|不可以&#…

九、HTML头部<head>

一、HTML头部<head> 1、<title>- 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>我的 HTML 的第一页</title> </head><b…

MySQL8.0安装(Linux - centos)

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

STM32F103GPIO工作模式及原理

目录 GPIO简介GPIO工作模式输入模式输出模式输出速度 GPIO框图和电路解析电路标识电路元件 GPIO工作模式电路解析浮空输入上拉输入下拉输入模拟输入开漏输出推挽输出推挽式复用功能开漏式复用功能 IO工作模式的选取输入模式输出模式 GPIO简介 GPIO&#xff0c;全称为通用输入输…