element 图片预览组件 点击图片显示当前图片

elementUI的el-image元素有一个预览属性preview-src-list .设置了这个属性的话, 将开启图片预览功能
但是点击图片后显示的是list第一条的图片，接下来是解决的办法。

1. 点击图片, 显示当前图片预览图, 可轮播. 无论点击那一行的图片, 图片切换的顺序不变

   所以目前就是直接通过图片url 匹配到图片列表了.

<template>
        <el-image :preview-src-list="previewImgList" @click="imageClicked(item.url)"  style="height: 210px" :src="item.photo" fit="contain"></el-image>
   </template>
   
   <script>
   export default{
     data(){
       tableData:[],
       tableDataImageList:[],
     },
     methods:{
       /**
         * 这里的处理方式虽然有点瓜皮, 但还是能作到点用的
         */
       imageClicked(imageUrl){
         let imgList = JSON.parse(JSON.stringify(this.imgList));
        let index = imgList.findIndex(item=>item.url==imageUrl);
        let afterPicArr = imgList.slice(index);
        let beforePicArr = imgList.slice(0,index);
        this.previewImgList = afterPicArr.concat(beforePicArr);
       },
       
     /**
       * 初始化table数据, 同时设置当前表格的预览图片列表
       */
   //请求接口获取图片列表
    getTableData() {
      getPhotoData().then(res => {
        this.imgList = res.rows;
      })
    },
     },
     mounted(){
       this.getTableData();
     }
   }
   </script>