原文链接实现点击里面的图片实现大图预览的效果；
两种方式：①viewer插件（更美观）；②el-img；
文章目录
一、viewer插件使用
可以点击播放全屏展示；
（1）先安装viewer — 使用npm安装
npm install v-viewer --save
（2）在main.js中引入
import Viewer from 'v-viewer' //点击图片大图预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({ //默认样式，可以按需求更改
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
（3）在页面上使用
<el-table-column prop="imgPath" label="菜品图片" align="center" header-align="center">
<template slot-scope="scope">
<viewer>
<img :src="scope.row.imgPath" width="60px" />
</viewer>
</template>
</el-table-column>
下面是，默认选项介绍：
二、el-img使用
element plus实现；
三、案例使用
（1）el-table表格行图片点击查看大图（viewer插件实现）
<el-table-column prop="imgPath" label="图片" align="center" header-align="center">
<template slot-scope="scope">
<viewer>
<img :src="scope.row.imgPath" width="60px" />
</viewer>
</template>
</el-table-column>
（2）如果el-table表格再嵌套一个表格（viewer插件实现/el-img实现）
①viewer插件实现：在嵌套的表格里行图片点击查看大图
viewer包裹img：
<viewer>
<img :src="scope.row.url">
</viewer>
关于 type="expand"，表格展开行编辑此行时实现默认展开行不收回，在这篇文章里有讲，否则你编辑完展开行的数据它自动收起；
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="imgPath" label="图片" align="center" header-align="center">
<template slot-scope="scope">
<viewer>
<img :src="scope.row.imgPath" width="60px" />
</viewer>
</template>
</el-table-column>
<el-table-column type="expand">
<template #default="props">
<div m="4">
<el-table :data="props.row.experienceList">
<el-table-column label="时间" prop="time" />
<el-table-column label="地点" prop="place" />
<el-table-column label="图片">
<template #default="scope">
<viewer>
<img title="点击查看大图" :src="'/api/' +scope.row.url" style="height:80px;width:120px;cursor: pointer">
</viewer>
</template>
</el-table-column>
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button size="small" class="team-manage-button" :icon="Edit" @click="openEditExperienceFile(scope.row)">编辑</el-button>
<el-button size="small" class="team-manage-delete-button" :icon="Delete" @click="deleteExperienceFile(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
</el-table>
②el-img实现：在嵌套的表格里展示多张图片，点击某张图片开始预览且可以轮播预览即数据嵌套查看大图
与上面的区别是：上面展示的是展开行一行一行的单独图片，而这里是在展开行里把所有行的props.row.experienceList里的图片单独拿出来，组成新的图片数组props.row.srcList来预览；
它是可以点击某张图片:initial-index="index"实现预览，然后可以轮播预览其后图片；
<el-table-column type="expand">
<template #default="props">
<div m="4">
<div style="font-size: 18px;line-height: 30px;font-weight: 800;margin: 15px 0 15px 10px">工作经历</div>
<el-table :data="props.row.experienceList" :border="teamChildBorder">
<el-table-column label="时间" prop="time" />
<el-table-column label="地点" prop="place" />
</el-table>
<div style="font-size: 18px;line-height: 30px;font-weight: 800;margin: 15px 0 15px 10px">荣誉证书</div>
<span v-for="(item,index) in props.row.experienceList" :key="index">
<el-image :src="item.url"
title="点击查看大图"
class="experience-img"
:initial-index="index"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:hide-on-click-modal="true"
:preview-teleported="true"
:preview-src-list="props.row.srcList"/>
</span>
</div>
</template>
</el-table-column>
data() {
return {
srcList:[],
tableData:[
{
job: '',
name: '',
imgPath:'',
experienceList: [
{
time:'',
place: '',
url:'',
},
],
},
],
}
},
//在你调用接口拿所有数据tableData时候，拿预览图片数组
for(let item of this.tableData){
this.srcList = [];
if (item.experienceList.length>0){
item.experienceList.forEach(experience => {
this.srcList.push(experience.url);
})
item.srcList = this.srcList;
}
}
（3）点击文字后展示图片，点击图片后大图预览，关闭预览后展示文字
<div class="title-top">
<div v-if="!isShowQQ" title="点击查看QQ二维码" class="title-bottom" @click="showQQPreview">QQ联系</div>
<div>
<el-image v-if="isShowQQ"
:src="qqCode"
class="title-bottom"
title="点击查看大图"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
@close="showQQPreview"
:hide-on-click-modal="true"
:preview-teleported="true"
:preview-src-list="srcQQList"/>
</div>
<div v-if="!isShowWX" title="点击查看微信二维码" class="title-bottom" @click="showWXPreview">微信联系</div>
<el-image v-if="isShowWX"
:src="wxCode"
class="title-bottom"
title="点击查看大图"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
@close="showWXPreview"
:hide-on-click-modal="true"
:preview-teleported="true"
:preview-src-list="srcWXList"/>
</div>
//是否预览QQ大图
showQQPreview(){
this.isShowQQ = !this.isShowQQ;
if (this.qqCode){
this.srcQQList.push(this.qqCode)
}
},
//是否预览WX大图
showWXPreview(){
this.isShowWX = !this.isShowWX;
if (this.wxCode){
this.srcWXList.push(this.wxCode)
}
},