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.mzph.cn/news/603404.shtml

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

相关文章

一起玩儿物联网人工智能小车(ESP32)——24. 变量与函数(二)

摘要&#xff1a;本文介绍变量和函数的基本知识 在前面一篇中了解了变量&#xff0c;接着就来了解一下函数。函数是程序中的一个关键概念&#xff0c;它可以简化程序的编写&#xff0c;使代码更加模块化、可复用&#xff0c;提高程序的可读性。其实在之前已经多次遇到函数了&am…

Arduion Modbus通讯示例

实现了Arduion和Qt上位机利用Modbus协议采集DHT11数据&#xff0c;以及开关LED灯 软件界面&#xff1a; 实物界面&#xff1a; arduion下位机代码&#xff1a; #include <ModbusRtu.h> #include <DHT.h>#define DHTPIN 2 // DHT11连接到Arduino的数字引…

使用C#发送邮箱验证码

使用C#发送邮箱验证码 在很多应用程序中&#xff0c;我们需要使用邮箱来进行用户身份验证。其中一种常见的方式是通过发送验证码到用户的邮箱&#xff0c;然后要求用户输入该验证码进行验证。本文将介绍如何使用 C# 发送邮箱验证码。 声明 验证码登录没有用任何的工具&#…

学习尚硅谷Vue的TodoList案例下半部分总结

今天学习尚硅谷Vue的TodoList案例四到八节的内容&#xff0c;主要实现的功能有勾选、删除、底部统计、底部交互这几部分。先说勾选&#xff0c;想要获取到用户是否勾选&#xff0c;就要给checkbox多选框注册鼠标点击事件&#xff0c;这里的思路是用户虽然是获取到了是否勾选但还…

项目框架构建之3:Nuget服务器的搭建

本文是“项目框架构建”系列之3&#xff0c;本文介绍一下Nuget服务器的搭建&#xff0c;这是一项简单的工作&#xff0c;您或许早已会了。 1.打开vs2022创建Asp.net Web应用程序 框架选择.net framework4.8&#xff0c;因为nuget服务器只支持.net framework。 2.选择空项目和保…

C++ 学习系列 -- tuple 原理

一 可变参数模板 variadic template 前面的章节 C 学习系列 -- 模板 template-CSDN博客 我们介绍了 c 中的模板概念&#xff0c;本章则在其基础上介绍了新的概念 可变参数模板 variadic template &#xff0c;顾名思义&#xff0c;可变参数模板意思为模板参数的类型与数量是变…

微信小程序封装vant 下拉框select 单选组件

先上效果图&#xff1a; 主要是用vant 小程序组件封装的&#xff1a;vant 小程序ui网址&#xff1a;vant-weapp 主要代码如下: 先封装子组件&#xff1a; select-popup 放在 components 文件夹里面 select-popup.wxml: <!--pages/select-popup/select-popup.wxml--> &…

爆肝整理,企业级性能测试-性能方案设计详细总结(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、测试策略 1&a…

【小沐学C++】C++ 实现鼠标键盘钩子HOOK

文章目录 1、简介2、相关函数2.1 SetWindowsHookEx2.2 UnhookWindowsHookEx2.3 CallNextHookEx 3、相关结构体3.1 KBDLLHOOKSTRUCT3.2 MSLLHOOKSTRUCT 4、挂钩过程5、代码测试5.1 代码1 结语 1、简介 https://learn.microsoft.com/zh-cn/windows/win32/winmsg/about-hooks 挂…

Java学习笔记(十)——异常

一、异常的概念 二、异常体系图&#xff08;重要&#xff09; 三、常见的异常 &#xff08;一&#xff09;常见的运行时异常 1、NullPointerException空指针异常 2、ArithmeticException数学运算异常 3、ArrayIndexOutOfBoundsException数组下标越界异常 4、ClassCastEx…

CSS 压重按钮 效果

<template><view class="cont"><div class="container"><div class="pane"><!-- 选项1 --><label class="label" @click="handleOptionClick(0)":style="{ color: selectedOption ==…

约数个数和约数之和算法总结

知识概览 约数个数 由算数基本定理 可得对于N的任何一个约数d&#xff0c;有 因为N的每一个约数和~的一种选法是一一对应的&#xff0c;根据乘法原理可得&#xff0c; 一个数的约数个数为 约数之和 一个数的约数之和公式为 多项式乘积的每一项为 正好对应的是一个数的每一个约…

【网络安全】upload靶场pass11-17思路

目录 Pass-11 Pass-12 Pass-13 Pass-14 Pass-15 Pass-16 Pass-17 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x…

JetCache源码解析——配置加载和初始化

JetCache自动化配置加载 JetCache的配置加载主要是在jetcache-autoconfigure模块中完成的&#xff0c;其中加载配置的核心类是JetCacheAutoConfiguration&#xff0c;主要是用于创建全局性的一些Bean&#xff0c;例如全局缓存配置类GlobalCacheConfig&#xff0c;AutoConfigur…

数据密集型应用系统设计--第2章 数据模型与查询语言

一、引言 数据模型可能是开发软件最重要的部分,而且还对如何思考待解决的问题都有深远的影响。 大多数应用程序是通过一层一层叠加数据模型来构建的。每一层都面临的关键问题是&#xff1a;如何将其用下一层来表示&#xff1f; 1.作为一名应用程序开发人员&#xff0c;观测现实…

yarn无法加载文件和‘vue-cli-service‘ 不是内部或外部命令解决方法

导致此错误的原因是&#xff0c;PowerShell 执行策略&#xff0c;默认设置为Restricted不加载配置文件或运行脚本。需变更设置为RemoteSigned&#xff0c;变更过程为&#xff1a; 1.运行 Windows PowerShell&#xff08;管理员&#xff09;&#xff0c;执行命令set-ExecutionPo…

使用redis时快速考虑的问题

使用场景 ap组件程序是否容忍极限丢失1s数据是否可以不依赖redis就能实现是否过度依赖redis 数据结构 5种结构选择不同结构有自己的限制&#xff0c;使用前需考虑限制考虑当前业务最适合那种解构&#xff0c;或多种解构混合使用 key设计 大keykey的格式热key敏感数据 过…

Redis的IO多路复用原理解析

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…

SpringCloud系列篇:入门讲解Spring Cloud是什么

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Spring Cloud是什么 二.Spring …

通俗易懂的15个Java Lambda表达式案例

文章目录 1. **实现Runnable接口**&#xff1a;2. **事件监听器**&#xff08;如Swing中的ActionListener&#xff09;&#xff1a;3. **集合遍历**&#xff08;使用forEach方法&#xff09;&#xff1a;4. **过滤集合**&#xff08;使用Stream API&#xff09;&#xff1a;5. …