Element-ui图片预览功能

Element-ui中的el-image的图片预览功能(: preview-src-list)

今天用了ement-ui的图片预览功能，但是它的图片现览功能只能现览更先定义的图片与我的业务功能不符

业务功能

我的业务功能就是当点击一行表格中的一个图片时，这个图片就被预览了，代码很简单，就是直按复制element-ui中的图片预览组件就行

业务代码

 

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

 

上面的这段代码与element-ui中的没有区别，唯一 的区别就是我设置了一个点击事件click。

注意事项

在下面的js中，定义srcList变量。(这 个在srcListD里面必须要加上一张图片，才可以

(因为srcList[]里面如果不加图片的话，我们第一次点击是弹不出预览框的，element-ui文档 上也是当有图片时才会弹出来预览的框。

我们第二次点击的时候，有了第一次点击时候的图片，就可以弹出预览框了，但是也仅限于页面不刷新，刷新之后我们还需要点击两次才能弹出预览框)

所以我们这里在srcList0里面必须填写一个图片地址)

srcList: [
https://t9.baidu.com/it/u=2842182572,2986127902&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=C82EB2546BB3C645021F3D810300F088&sec=1658336400&t=bfd66a343425416db5cd0c6aa3ab38f3
],　　

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

 

deleteSrc(val) {
this.srcList = 0
this.srcList.push(val)