效果：能在表格中展示且點擊需要查看的即可放大查看，多組圖片放大時可左右切換

?

?核心代碼：

注意：

workPhoto是圖片地址的數(shù)組

通過v-for來遍歷每個列表的圖片地址數(shù)組，結合:src="item"把每個圖片展示在表格里，展示圖片的大小樣式用style來設定

通過:perview-src-list="getImgList(scope.row.workPhoto, index)"來開啟圖片預覽功能且調用方法getImgList()，每次傳入當前表格的圖片地址數(shù)組以及點擊查看的圖片的下標

getImgList()中建立臨時數(shù)組arr存放放大查看圖片時的圖片地址數(shù)組，即把放大的圖片及后面圖片的下標提到最前面，把前面圖片的下標放在后面，如圖所示：

點擊第二張圖片查看時，通過點擊圖片的下標進行重新排序且輸出新的數(shù)組，實現(xiàn)輪播效果文章來源地址http://www.zghlxwxcb.cn/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="創(chuàng)建者ID" align="center" prop="createBy" />
      <el-table-column label="創(chuàng)建時間" 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實現(xiàn)在el-table-column中展示多張圖片，且能夠大圖循環(huán)預覽的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！