Element-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>