element-ui圖片（檢視大圖），可通過 previewSrcList 開啟預覽大圖的功能。

寫在element-ui表格中，使用作用域插槽迴圈圖片

<!-- template插槽 -->
<template slot-scope="scope">

	<div class="demo-image__preview">
	 <el-image 
	  style="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);
	  });
	});
}

最終效果：

到此這篇關於element-ui檢視大圖的方法示例的文章就介紹到這了,更多相關element檢視大圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！