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

news2024/11/27 20:33:35

官方给的:

<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.coloradmin.cn/o/1365636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搭建Github Page完全手册

一、前期准备 注册Github账号&#xff08;必备&#xff09;下载GitHub Desktop&#xff1a;下载链接&#xff08;可使用git代替&#xff09;模板选择网站&#xff1a; jekyllthemes.orggohugomademistakes 二、快速入门 1.模板参考 作者使用的模板来源&#xff1a;https://…

灌区信息化方案(什么是现代化灌区,如何一步到位)

一、系统概述 详情&#xff1a;https://www.key-iot.com.cn/ 本灌区信息化方案以星创易联公司的各类智能设备为基础,通过其产品完成水文、雨情、土壤等多源异构数据的采集,以无线自组网的方式实现数据传输,并在后台管理中心建立信息化软件平台,对数据进行融合处理。系统实现对…

MYSQL双主节点–更换ip

MYSQL双主节点–更换ip 一、更换双主节点ip 1.停止mysql服务 #安装了supervisor supervisorctl stop mysql #未安装 systemctl stop mysqld2.修改网卡配置信息 注&#xff1a;ens33是网卡名称&#xff0c;可能网卡不叫ens33 vi /etc/sysconfig/network-scripts/ifcfg-ens333…

小样本学习介绍(超详细)

小样本学习介绍 本文首先介绍了什么是小样本学习&#xff0c;其次介绍了为什么小样本学习的很多文章都采用元学习的方法。目的是通过通俗的解释更加清楚的介绍小样本学习是什么&#xff0c;适合初学者的入门。当然&#xff0c;以下更多的是自己的思考&#xff0c;欢迎交流。 …

频率域滤波图像复原的python实现——数字图像处理

原理 维纳滤波的原理是基于统计方法&#xff0c;旨在通过最小化信号的估计误差来改善信号的质量。它在处理具有噪声干扰的信号时特别有效。维纳滤波旨在从受噪声干扰的信号中恢复原始信号。它假设信号和噪声都是随机过程&#xff0c;并且它们的统计特性是已知的或可估计的。维…

面试算法99:最小路径之和

题目 在一个mn&#xff08;m、n均大于0&#xff09;的格子中&#xff0c;每个位置都有一个数字。一个机器人每步只能向下或向右&#xff0c;请计算它从格子的左上角到达右下角的路径的数字之和的最小值。例如&#xff0c;从图14.8中33的格子的左上角到达右下角的路径的数字之和…

vue-springboot 音乐推荐系统 带歌词的音乐播放器系统设计与实现 7902c

少数民族音乐网站在流畅性&#xff0c;续航能力&#xff0c;等方方面面都有着很大的优势。这就意味着少数民族音乐网站的设计可以比其他系统更为出色的能力&#xff0c;可以更高效的完成最新的音乐信息、音乐资讯、在线交流等功能。 此系统设计主要采用的是JAVA语言来进行开发&…

有趣的前端知识(一)

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读HTML简介基础声明HTML标签标题段落注释水平线文本格式化标签超链接图像<i…

C#开源的一款友好的.NET SDK管理器

前言 今天推荐一款由C#开源的、友好的.NET SDK管理器&#xff1a;Dots。 工具介绍 Dots 是一款 .NET SDK 管理器&#xff0c;可让您轻松安装、卸载和切换 .NET SDK。它是一款跨平台工具&#xff0c;可在 Windows 和 macOS 上运行&#xff0c;即将支持 Linux。它由 C# 编写&a…

机器学习周报第27周

目录 摘要Abstract一、文献阅读 摘要 本周阅读了一篇混沌时间序列预测的论文&#xff0c;论文模型主要使用的是时间卷积网络&#xff08;Temporal Convolutional Network&#xff0c;TCN&#xff09;、LSTM以及GRU。在数据集方面除了使用现实的时间序列数据外&#xff0c;还通…

区块链与元宇宙电商:重塑商业生态革命

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 在当…

ICMP隐蔽隧道工具Pingtunnel搭建隧道(附搭建环境避坑超详细)

工具介绍可参考其他博主文章&#xff0c;这里直接上环境搭建和踩坑避坑后的工具攻击过程。 目录 环境搭建 #安装libpcap的依赖环境 打通隧道&#xff08;linux服务端开启监听&#xff09; 连接测试&#xff08;kali攻击机上启动&#xff09; 远控攻击&#xff08;win7&…

CSS案例:flex、justify-content、align-items

黑马程序员JS学习时的一个案例&#xff0c;CSS有点不懂&#xff0c;单拎出来分析。 具体出处是某站视频中的数组篇讲解&#xff0c;&#xff08;点击链接跳转&#xff09; CSS案例 效果&代码1. 先分析最大的boxflex布局 justify-contentalign-items以 flex-end 为例 2. box…

STM32 基础知识(探索者开发板)--146讲 IIC

IIC特点&#xff1a; 同步串行半双工通信总线 IIC有一个弱上拉电阻&#xff0c;在主机和从机都没有传输数据下拉时&#xff0c;总线会自动上拉 SCL在低电平期间&#xff0c;改变SDA的值来上传数据&#xff0c;方便SCL电平上升时进行数据读取 SCL在高电平期间&#xff0c;不能…

第二证券:如何解决股票亏损问题?

1、进行补仓 假设该股票基本面较好只是暂时的出现下跌&#xff0c;那么就可以选择补仓。出资者在亏本过程中&#xff0c;可以经过补仓来增加持仓数量&#xff0c;从而下降其持仓本钱&#xff0c;等候股票的反弹&#xff0c;来抵达快速解套的意图。 2、高抛低吸、做T获利弥补 …

书生·浦语大模型趣味 Demo笔记及作业

文章目录 笔记作业基础作业&#xff1a;进阶作业&#xff1a; 笔记 书生浦语大模型InternLM-Chat-7B 智能对话 Demo&#xff1a;https://blog.csdn.net/m0_49289284/article/details/135412067书生浦语大模型Lagent 智能体工具调用 Demo&#xff1a;https://blog.csdn.net/m0_…

018、通用集合类型

Rust标准库包含了一系列非常有用的被称为集合的数据结构。大部分的数据结构都代表着某个特定的值&#xff0c;但集合却可以包含多个值。 与内置的数组与元组类型不同&#xff0c;这些集合将自己持有的数据存储在了堆上。这意味着数据的大小不需要在编译时确定&#xff0c;并且可…

【Docker】数据卷容器

多个容器进行数据交换 这里引入一个数据卷容器的概念 以下介绍容器A与容器B进行数据交换的原理 假如容器A要与容器 B 进行数据交换&#xff0c; 首先创建一个容器C&#xff0c;将他挂载到数据卷&#xff0c;然后再将容器A与容器B挂载到容器C&#xff0c;这样做相当于容器A与…

在版权付费方面,OpenAI 比人想象中的还要「小气」

随着新闻出版商与AI公司达成“使用新闻训练AI模型”的协议&#xff0c;像 OpenAI 等科技企业愿意为受版权保护的信息支付的价格逐渐浮出水面。 据 The Information 报道&#xff0c;OpenAI 每年愿意向出版商提供 100万到500万美元来支付受版权保护的新闻文章训练其AI模型。 但…

LaTex的下载与安装(Texlive+TexStudio,2023版)

目录 1. Texlive的下载与安装2. TexStudio的下载与安装 LaTex的下载与安装涉及到环境配置和编辑器安装&#xff0c;本文主要根据一下两个较为常用的组合进行下载和安装&#xff1a; Texlive&#xff08;是必须安装的LaTex环境&#xff09;&#xff1b;TexStudio&#xff08;是…