vue element-ui的table列表中展示多张图片(可放大)效果实例

更新时间：2023年08月22日 14:02:06 作者：Single-Thread

这篇文章主要给大家介绍了关于vue element-ui的table列表中展示多张图片(可放大)效果的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下

一、效果图

效果图基本就是这样，如果需要此效果的小伙伴可以往下看；

二、代码部分

1、先简单的复述一下原理

因为一个table表格里面要存放一张或多张图片，所以前端接受到图片相关的数据肯定是个数组类型的，所以此时就要用到v-for="(item,index) in xxx" :key="index"的方法来实现，说到这不知道你有没有受到一点点启发，没有的话，直接上代码：

2、template部分

//images就是后端传递的图片的数组类型数据
//<el-table-column>包裹一个<template>标签，然后在包裹element-ui的image大图组件
//然后就用到了上边说的v-for="(item, index) in scope.row.images" :key="index"这个重要的知识点
//：src是图片的url
//:preview-src-list是展示大图的数组
<el-table-column prop="images" label="配图" align="center" width="150">
   <template slot-scope="scope">
         <el-image v-for="(item, index) in scope.row.images" :key="index":src="item"
              :preview-src-list="[item]" >
         </el-image>
   </template>
</el-table-column>

3、script

这个部分其实没什么代码，口头复述吧，因为后端上传的都不一样，但是有一点必须是数组类型，上图的代码才有效，当然如果只是一张图一张图的发给你，估计也不需要一个table存放多张图了，那样也就不需要使用v-for了对吧（后端传图片地址数组，前端循环遍历出现，原理就是这么简单）

其实没什么难度，只需要看你对v-for的理解程度了

总结

到此这篇关于vue element-ui的table列表中展示多张图片(可放大)效果的文章就介绍到这了,更多相关element-ui table列表展示多图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中iframe的使用及说明
这篇文章主要介绍了vue中iframe的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3 中的 shallowReactive 详解
本文深入探讨了Vue3中新特性shallowReactive的使用和原理,shallowReactive是创建浅响应式对象的API,只对对象的第一层属性进行响应式转换,不对嵌套对象处理,有助于性能优化和状态管理,同时也指出了shallowReactive在使用中的注意事项
2024-10-10
Vue中之nextTick函数源码分析详解
这篇文章主要介绍了Vue中之nextTick函数源码分析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
讲解vue-router之命名路由和命名视图
这篇文章主要介绍了讲解vue-router之命名路由和命名视图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue读取本地静态文件json的2种方法以及优缺点
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue分页插件的前后端配置与使用
这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
在Vue3中实现缓存和复用动态组件
本文介绍了在Vue3中使用<KeepAlive>组件和手动管理组件实例来缓存和复用动态组件的方法,使用<KeepAlive>可以缓存特定组件,控制缓存实例数量,并通过生命周期钩子执行相应逻辑,手动管理则通过对象存储组件实例,提高性能,最后,将逻辑封装到组合式函数中,增强代码复用性
2026-04-04
vue实现导入json解析成动态el-table树表格
本文主要介绍了vue实现导入json解析成动态el-table树表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
vue全局混入之状态判断是否执行点击
这篇文章主要介绍了vue全局混入之状态判断是否执行点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue如何实现变量表达式选择器
这篇文章主要介绍了Vue如何实现变量表达式选择器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-02-02