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

这篇具有很好参考价值的文章主要介绍了el-image实现在el-table-column中展示多张图片，且能够大图循环预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

el-table-column 图片,elementui,前端,javascript,vue

核心代码：

注意：

workPhoto是图片地址的数组

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

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

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

el-table-column 图片,elementui,前端,javascript,vue 点击第二张图片查看时，通过点击图片的下标进行重新排序且输出新的数组，实现轮播效果文章来源地址https://www.toymoban.com/news/detail-751305.html

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

到了这里，关于el-image实现在el-table-column中展示多张图片，且能够大图循环预览的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！