当前位置: 首页 > news >正文

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.lryc.cn/news/276442.html

相关文章:

  • cad快速看图软件免费版(手机在线cad快速看图)
  • C#: Label、TextBox 鼠标停留时显示提示信息
  • .NET 8.0 本机 AOT
  • phpcms v9未审核推荐信息出现在推荐列表中【BUG修复】
  • Linux第20步_在虚拟机上安装“Visual Studio Code”
  • 【服务器数据恢复】Raid5热备盘同步失败导致lvm结构损坏的数据恢复案例
  • react+AntDesign 之 pc端项目案例
  • 实验笔记之——基于COLMAP的Instant-NGP与3D Gaussian Splatting的对比
  • 实战环境搭建-linux下安装悟空CRM
  • Redis 7.0性能大揭秘:如何优化缓存命中率?
  • 【深度学习每日小知识】Data Augmentation 数据增强
  • 网络调试 UDP1,开发板用动态地址-入门6
  • 【Gin实战教程】快速入门
  • WPF真入门教程26--项目案例--欧姆龙PLC通讯工具
  • C++ OpenGL 3D Game Tutorial 2: Making OpenGL 3D Engine学习笔记
  • Redis小计(4)
  • 【React】常用Hook函数的梳理和总结(第二篇)
  • 【JaveWeb教程】(15) SpringBootWeb之 响应 详细代码示例讲解
  • 「 PyMuPDF专栏 」PyMuPDF为PDF文件添加注释
  • 5 - 视图|存储过程
  • 系统学习Python——警告信息的控制模块warnings:警告过滤器-[基础知识]
  • vue中高德地图使用
  • 算法训练营Day33
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • 电子电器架构网络演化 —— 车载以太网TSN
  • 智能门锁触控工作原理中应用的电容式触摸芯片
  • Spark 中 BroadCast 导致的内存溢出(SparkFatalException)
  • 深度学习经典算法详细模型图
  • 03、Kafka ------ CMAK(Kafka 图形界面管理工具) 下载、安装、启动
  • 复习python从入门到实践——函数function