先上效果图
大图预览效果,包含放大、缩小、大图预览、旋转、关闭的效果
el-table表格的架构
// 多张图片的路径是数组;
picturePath:[
"/fyzxhm/file/713a30c9702c432095ba0b22c09cf16c.jpg",
"/fyzxhm/file/078f19f8052e4883bcb82ea327236d79.png",
"/fyzxhm/file/3806676db5f141b4b9ac47a0576a33f0.jpg"]
// el-table
<el-table-column prop="enclosure" label="附件" width="150" sortable>
<template slot-scope="scope">
<el-image v-for="(item,index) in picturePath" :key="index"
style="width: 40px; height: 40px;padding-right:10px"
:src = "item"
:preview-src-list="getPreviewImgList(index)"
>
</el-image>
<video src="this.videoPath">视频</video>
</template>
</el-table-column>
js部分:// 图片预览
getPreviewImgList(index) {
let arr = [];
for (let i = 0; i < this.picturePath.length; i++) {
arr.push(this.picturePath[i + index]);
if (i + index >= this.picturePath.length - 1) { // 为了取后边小值(采用绝对值)
index = 0 - (i + 1);
}
}
return arr;
},
注意点:一定要注意图片路径,路径没问题一定可以显示出来!