html部分:
<el-image v-for="(ele,index) in detailsData.fileIds" :key="index"
style="width: 100px; height: 100px"
:src="ele.fileDataUrl"
:preview-src-list="getPreviewImgList(index)">
</el-image>
detailsData.fileIds :// 后台返回的 url数组对象
getPreviewImgList(index) 每个el-image都有一个preview-src-list数组预览对象(个人认为这也是UI处理不友好的地方) 返回的数组为:
(12) [
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址"
]
js部分:
getPreviewImgList: function (index) {
let arr = [];
for (let i = 0; i < this.detailsData.fileIds.length; i++) {
arr.push(this.detailsData.fileIds[i + index].fileDataUrl);
if (i + index >= this.detailsData.fileIds.length - 1) { // 为了取后边小值(采用绝对值)
index = 0 - (i + 1);
}
}
return arr;
},