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: [
        "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）这里可以看到当我点击“王俊凯”这行，出现的是王俊凯的照片