vue element-ui的table列表中展示多张图片(可放大)效果实例
作者：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列表展示多图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！