element-ui 多张图片展示以及点击图片预览功能实现

页面展示代码：

<el-image v-for="(item, index) of photoLists" :key="index" :src="item.sfUrl" :preview-src-list="getPreviewImgList(index)"></el-image>

 

实现代码：

export default {
  data() {
    return {
　　　　　　photoLists: []， // 图片数据
　　　　　　srcList: [], // 图片大图预览数据 
　　　　}
　　}
}

// viewUploadImages接口获取图片数据

viewUploadImages(params).then((response) => {
  this.photoLists = response.data
  for(let item of this.uploadImages){
    this.srcList.push(item.sfUrl)
  }
})

// 大图预览，实现点击当前图片显示当前图片大图，可以随机切换到其他图片进行展示
getPreviewImgList:function(index) {
  let arr = []
  let i = 0;
  for(i;i < this.srcList.length;i++){
    arr.push(this.srcList[i+index])
    if(i+index >= this.srcList.length-1){
      index = 0-(i+1);
    }
  }
  return arr;
},