Element-ui中的el-image的图片预览功能（preview-src-list）

1. 今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是当点击图片时，就预览当前点击的图片。
2. 所以我将其修改了一下，功能就是当点击一行表格中的一个图片时，这个图片就被预览了，代码很简单，就是直接复制element-ui中的图片预览组件就行

<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="srcList"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>

3. 上面的这段代码与element-ui中的没有区别，唯一的区别就是我设置了一个点击事件click。
4. 在下面的js中，定义srcList变量。（这个在srcList[]里面必须要加上一张图片，才可以（因为srcList[]里面如果不加图片的话，我们第一次点击是弹不出预览框的，element-ui文档上也是当有图片时才会弹出来预览的框。我们第二次点击的时候，有了第一次点击时候的图片，就可以弹出预览框了，但是也仅限于页面不刷新，刷新之后我们还需要点击两次才能弹出预览框）所以我们这里在srcList[]里面必须填写一个图片地址，随便图片地址就行，你们也可以填写我的图片！）

srcList: [
        "https://elevator4s-oss.oss-cn-hangzhou.aliyuncs.com/2021/05/07/b632db6a837f46e0950670277fa9e5e5multipartFile.png"
      ],

5. 在下面js方法中，给srcList变量做添加，因为其为Array，所以添加时应该用push（这是一个方法，写在methods里面，这样写的思路是每次点击图片预览的时候，都将当前srcList清空，再将当前点击的照片的路径给他加上。如果不清空，就会存进去好多图片，直到页面再次刷新）

vbs(val) {
      this.srcList = []
      this.srcList.push(val)
    }

6. 下面是实现效果。
   （1）这里可以看到我点击的“贾玲”这行，出现的是贾玲的图片（点击的那行是深颜色的）
   （2）这里可以看到当我点击“王俊凯”这行，出现的是王俊凯的照片

简单方法（评论区超网888网友）
当时看到这个方法之后，就感觉自己的方法有点复杂了，所以我把这个方式也写在下面，两种方法都可以实现，可以自己斟酌选择哪个：

<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="[scope.row.staffIcon]"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>

一切的事情或人，都有他出现的原因，不要因为眼前的糟心事而沮丧，学着接受，学着克服，未来可期！