vue如何让element-ui的table列表中展示多张图片（可放大）的效果？_vue添加多张图片

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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的理解程度了

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总