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.hqwc.cn/news/333798.html

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

相关文章

信号的互相关计算及时延估计

1. 信号的互相关计算 互相关反映向量x和移位&#xff08;滞后&#xff09;向量y之间的相似性。 最直观的解释是&#xff1a;互相关的作用是为了找到信号在哪一时刻与另一信号最像&#xff08;另一信号为本身时就是自相关&#xff09;&#xff01; 滑动求互相关&#xff08;图…

全球化视野下的品牌出海:生态体系的构建与优化

随着全球化的不断深入&#xff0c;品牌出海已成为企业迈向国际市场的重要战略之一。在这个竞争激烈的时代&#xff0c;品牌要在国际市场上获得成功&#xff0c;不仅需要具备强大的产品力和市场洞察力&#xff0c;还需要构建和优化一个完善的生态体系。本文Nox聚星将和大家探讨在…

常见的Latex公式所用到的内容汇总

行内公式 f ( x ) a b f(x)ab f(x)ab 左右各加一个$&#xff0c;即为行内公式 $ f(x) ab $行间公式 $$ f(x) ab $$f ( x ) a b f(x)ab f(x)ab 手动编号 $$ f(x) a - b \tag{1.1} $$f ( x ) a − b (1.1) f(x)a-b \tag{1.1} f(x)a−b(1.1) 简单运算 -*/以及阿拉伯…

【已解决】Invalid bound statement (not found)

报错讯息 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.casey.mapper.SysRoleMapper.getUserRoleCode at org.apache.ibatis.binding.MapperMethod S q l C o m m a n d . < i n i t > ( M a p p e r M e t h o d . j a v a :…

Excel5:自动化周报的制作

自动化周报的数据引用来源于8月成交数据-纯数值表格&#xff0c;因为8月成交数据表格中部分单元格中有vlookup函数&#xff0c;且存在跨表连接。 对于跨表连接的解释和说明&#xff1f; 首先打开我们之前做好的成交数据。打开后我们可以看到这上面出现了一个安全警告&#xff0…

Java中的装箱和拆箱

自动装箱和拆箱问题是Java中一个老生常谈的问题了&#xff0c;今天我们就来一些看一下装箱和拆箱中的若干问题。本文先讲述装箱和拆箱最基本的东西&#xff0c;再来看一下面试笔试中经常遇到的与装箱、拆箱相关的问题。 一.什么是装箱&#xff1f;什么是拆箱&#xff1f; 我们…

Flutter桌面软件开发中实现本地通知

Flutter桌面软件开发中实现本地通知可以使用local_notifier &#xff0c;local_notifier这个插件允许 Flutter 桌面 应用显示本地通知。 Flutter桌面软件开发中实现本地通知 第一步安装依赖 dependencies:local_notifier: ^0.1.5 Flutter桌面软件开发中实现本地通知 第二步配…

独立式键盘控制的4级变速流水灯

#include<reg51.h> // 包含51单片机寄存器定义的头文件 unsigned char speed; //储存流水灯的流动速度 sbit S1P1^4; //位定义S1为P1.4 sbit S2P1^5; //位定义S2为P1.5 sbit S3P1^6; //位定义S3为P1.6 sbit S4P1^7; //位…

产品渲染效果图怎么做?云渲染解决:批量效果图渲染

渲染产品效果图是设计师交付项目的重要环节之一&#xff0c;优秀的效果图渲染能准确传达设计意图和概念&#xff0c;并在与客户交流时产生积极评价。那么&#xff0c;如何制作出出色的产品效果图&#xff1f;另外&#xff0c;如何高效完成大量效果图的渲染呢&#xff1f; 一、产…

工程中的数据拟合方法

本文介绍工程中的数据拟合方法。 工程中经常会涉及到对测量到的数据进行拟合&#xff0c;如传感器标定。本文从工程化的角度介绍数据拟合。 1.数据测量 数据测量是非常重要的&#xff0c;数据测量的好坏直接影响数据是否能被按一定的函数曲线进行拟合及最终拟合的精度。 数…

基于filter的内存马

主要是通过过滤器来拦截severlet请求中的参数&#xff0c;作为过滤器中的参数&#xff0c;来调用自定义过滤器中的恶意函数 在这里我们分析一下filter的实现原理&#xff0c;循序渐进 Demo1&#xff1a; 直接使用filter模拟内存马效果&#xff1a; 1.配置一个简单的severlet的…

ssm基于Vue的戏剧推广网站论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统戏剧推广信息管理难度大&#xff0c;容错率低&#xff0c…