el-table中的el-image預覽小記

elementUI的el-image元素有一個預覽屬性`preview-src-list` .設置了這個屬性的話, 將開啟圖片預覽功能https://element.eleme.cn/2.13/#/zh-CN/component/image 

然后在開發的時候有的時候也會遇到在el-table中的一列中嵌入el-image元素,如果想通過點擊圖片,顯示圖片大圖預覽,
可以在<el-table-column></el-table-column> 中增加一個<template slot-scope="scope"></template>的模板.
然后在template中增加一個<el-image>的組件, 設置<el-image>組件的 preview-src-list, @click, 屬性/事件

此外, 還需要在加載表格數據的時候, 獲取到表格數據中所有的圖片.
獲取所有圖片是為了點擊圖片顯示大圖預覽的時候可以進行左右圖片切換.
如果只想點擊一個圖片顯示一張預覽圖的話, 這就更簡單了

1. 點擊圖片, 顯示當前圖片預覽圖, 不可輪播

   <template>
     <el-table :data="tableData">
       <el-table-column label="圖片">
         <template slot-scope="scope")>
           <el-image :preview-src-list="scope.row.tableRowImagePropName"></el-image>
         </template>
       </el-table-column>
     </el-table>
   </template>

   
   

2. 點擊圖片, 顯示當前圖片預覽圖, 可輪播. 無論點擊那一行的圖片, 圖片切換的順序不變
    本來還想着獲取table每一行的序號, 然后通過下標定位預覽圖片列表, 結果拼接完成之后圖片都變得不一樣了
    所以目前就是直接通過圖片url 匹配到圖片列表了.

   

<template>
     <el-table :data="tableData">
       <el-table-column label="圖片">
         <template slot-scope="scope")>
           <el-image :preview-src-list="tableDataImageList"
                     @click="imageClicked(scope.row.tableRowImagePropName)">
           </el-image>
         </template>
       </el-table-column>
     </el-table>
   </template>
   
   <script>
   export default{
     data(){
       tableData:[],
       tableDataImageList:[],
     },
     methods:{
       /**
         * 這里的處理方式雖然有點瓜皮, 但還是能作到點用的
         */
       imageClicked(imageUrl){
         let imgList = this.tableDataImageList;
         let index = this.imgList.indexOf(imageUrl);         // 通過點擊的圖片, 確定當前圖片在預覽圖片列表中的位置, 最好做下 >= 0的校驗
         
         let afterPicArr = this.imgList.slice(index);        // arr.slice 分割數組,不改變原數組,slice(index)返回index到數組結果的子數組 這里的目的是獲取當前點擊元素之后所有元素
         let beforePicArr = this.imgList.slice(0,index);     // 這里是獲取當前元素之前所有元素, 剛好讀不到index位置的數據
         let newImageList = afterPicArr.concat(beforePicArr);// 把這倆玩意拼在一起
         
         this.tableDataImageList = newImageList;             // 更新預覽圖片列表(preview-src-url)
       },
       
     /**
       * 初始化table數據, 同時設置當前表格的預覽圖片列表
       */
       getTableData(){
         // 以下axios請求
         API.getTableData(params).then(res=>{
           // 校驗返回結果
           this.tableData = res.data;
           this.tableDataImageList = 遍歷this.tableData, 獲取每個元素中的圖片屬性.然后賦值給tableDataIageList;
         }).catch(e=>{
           console.log(e)
         })
       }
     },
     mounted(){
       this.getTableData();
     }
   }
   </script>