element-ui查看大图

element-ui图片（查看大图），可通过

previewSrcList

开启预览大图的功能。

写在element-ui表格中，使用作用域插槽循环图片

<!-- template插槽 --><template slot-scope="scope"><div class="demo-image__preview"><el-imagestyle="width: 100%; height: 100%":src="scope.row.pic":preview-src-list="srcList"></el-image></div></template>

1.此处的

div

是展示大图的容器，当点击图象时显示出来。
2.

srcList

是存放大图路径的数组，在获取数据时，通过

forEach

将图片路径存放到srcList中

data() {return {data: [], // 所有数据srcList: [], //大图},mounted(){this.$http.get("/data.json").then((res) => {this.data = res.data;this.data.forEach((item) => {this.srcList.push(item.pic);});});}

最终效果：