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);
});
});
}
最終效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230744.html
標籤：其他
上一篇：jquery 實作 簡單 購物車 商品數量 和 商品的總價 （bootstrap），實作checkbox全選全不選