el-image实现在el-table-column中展示多张图片，且能够大图循环预览

 可大图循环预览,可展示当前第几张/共几张

<span class="downText" @click.stop.prevent="previewFn(item)">查看</span>

<!-- 展示图片组组件 -->
    <el-image
      v-show="false"
      id="imglist"
      ref="imgRef"
      :z-index="8000"
      :src="imgDialog.src"
      :preview-src-list="imgDialog.imgList"
    />
    <div v-show="imgNumShow" class="imgClass">{{ imgindex }}/{{ imgDialog.imgList.length }}</div>

imgDialog: {

        src: '',//当前路径

        imgList: []//图片路径数组

      },

imgNumShow: false,

computed: {

imgindex() {//当前第几张

      return this.imgDialog.imgList.indexOf(this.imgDialog.src) + 1

    }

}

previewFn(item) {
const element = document.getElementById('imglist')
        if (element) {
          element.click()
          this.imgNumShow = true
        } else {
          setTimeout(() => {
            document.getElementById('imglist').click()
            this.imgNumShow = true
          }, 100)
        }
        this.$nextTick(async() => {
          await this.$refs.imgRef.clickHandler()
          const next = document.getElementsByClassName(
            'el-image-viewer__next'
          )[0]
          const prev = document.getElementsByClassName(
            'el-image-viewer__prev'
          )[0]
          const mask = document.getElementsByClassName('el-image-viewer__mask')[0]
          const close = document.getElementsByClassName('el-image-viewer__close')[0]
          const that = this
          const imgFn = function() {
            const imgsrc = document.getElementsByClassName(
              'el-image-viewer__img'
            )[0].src
            that.imgDialog.src = imgsrc
          }
          const hideFn = function() {
            that.imgNumShow = false
            next.removeEventListener('click', imgFn)
            prev.removeEventListener('click', imgFn)
            mask.removeEventListener('click', hideFn)
            close.removeEventListener('click', hideFn)
          }
          next.addEventListener('click', imgFn)
          prev.addEventListener('click', imgFn)
          mask.addEventListener('click', hideFn)
          close.addEventListener('click', hideFn)
        })
}

其他方法

1、随意点击一张，大图首先展示该张，并且点击下一张，到最后一张后显示第一张，一次循环

2、效果：点击第四张，大图第一张为第四张的图

         

3、实现：

 
<el-image v-for="(img,index) in imgArr" :src="img" :preview-src-list="getImgList(index)"></el-image>
 
getImgList(index) {
      let arr = []
      let i = 0;
    for(i;i < this.imgArr.length;i++){
      arr.push(this.imgArr[i+index])
      if(i+index >= this.imgArr.length-1){
        index = 0-(i+1);
      }
    }
  return arr;
},

 

效果：能在表格中展示且点击需要查看的即可放大查看，多组图片放大时可左右切换

 

 核心代码：

注意：

workPhoto是图片地址的数组

通过v-for来遍历每个列表的图片地址数组，结合:src="item"把每个图片展示在表格里，展示图片的大小样式用style来设定

通过:perview-src-list="getImgList(scope.row.workPhoto, index)"来开启图片预览功能且调用方法getImgList()，每次传入当前表格的图片地址数组以及点击查看的图片的下标

getImgList()中建立临时数组arr存放放大查看图片时的图片地址数组，即把放大的图片及后面图片的下标提到最前面，把前面图片的下标放在后面，如图所示：

点击第二张图片查看时，通过点击图片的下标进行重新排序且输出新的数组，实现轮播效果

<template>    
    <el-table v-loading="loading" :data="workList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="作品ID" align="center" prop="workId" />
      <el-table-column label="作品名称" align="center" prop="workName" />
      <el-table-column label="作品" align="center" prop="workPhoto" width="400">
        <template slot-scope="scope">
          <el-image v-for="(item,index) in scope.row.workPhoto" 
            :src="item" 
            style="width: 100px; height: 100px" 
            :preview-src-list="getImgList(scope.row.workPhoto, index)" />
        </template>
      </el-table-column>
      <el-table-column label="创建者ID" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['userwork:work:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['userwork:work:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</template> 
 
<script setup lang="ts">
    methods: {
    /** 图片查看 */
    getImgList(workPhoto, index) {
      let arr = []
      if (workPhoto.length == 1) {
        arr.push(workPhoto[0])
      } else if (workPhoto.length == 0)  {
        return arr;
      } else {
        for(let i = 0;i < workPhoto.length;i++){
          arr.push(workPhoto[i+index])
          if(i+index >= workPhoto.length-1){
            index = 0-(i+1);
          }
        }
      }
      return arr;
    },
}
</script>