el-image图片预览不按索引展示-解决方案参考

现在要求 列表显示的是缩略图，点击预览展示原图 原来代码是这样的：:preview-src-list设置预览的数据组合， :initial-index设置点击预览时的图片索引，一切都很完美

  <template v-slot:photoTem="{ row }">
    <div v-if="row.files" style="height:auto;display: flex;justify-content: space-evenly;">
        <div v-for="(item, index) in row.files" :key="index" class="photoListCss">
            <el-image ref="previewImage" :src="item.fileThumburl || item.fileAddress"
                                    :preview-src-list="row.files.map(i => i.fileAddress)" :initial-index="index"
                                     fit=" contain"
                                    style="width: 60px; height: 60px;  margin-left: 10px;">
                                    <div slot="placeholder">
                                        加载中<span>...</span>
                                    </div>
                                </el-image>
        </div>
    </div>
</template>

但是上线后发现，如果这个图片有fileThumburl缩略图地址时，预览就会出现问题，无论选择第几个预览都会从第一个开始。但是如果fileThumburl为空的时候，预览是可以根据所选的图片来展示的。

测试修改 initial-index值，没有作用。

以下提供解决方案供参考，详细代码需要根据自身代码环境修改

方法一：单图片预览，不能左右滑动查看同列其他图片

修改 :preview-src-list=[item.fileAddress] 即可

方法二：多图片预览，手动触发预览（ai提供方案），但我这不生效

1.用原生属性选择，click触发

<template v-slot:photoTem="{ row }">
    <div v-if="row.files" style="height:auto;display: flex;justify-content: space-evenly;">
        <div v-for="(item, index) in row.files" :key="index" class="photoListCss">
            <el-image 
                :src="item.fileThumburl || item.fileAddress"
                :preview-src-list="row.files.map(i => i.fileAddress)"
                :initial-index="index"
                fit="contain"
                style="width: 60px; height: 60px; margin-left: 10px;"
                @click="handlePreview(row.files, index)">
                <div slot="placeholder">
                    加载中<span>...</span>
                </div>
            </el-image>
        </div>
    </div>
</template>
methods: {
    handlePreview(files, index) {
        this.$nextTick(() => {
            const previewImages = document.querySelectorAll('.el-image-viewer__img');
            if (previewImages.length > 0) {
                previewImages[index].click();
            }
        });
    },
    // ... other existing methods ...
}

2.用$ref来选中目标，showViewer来触发预览

<template v-slot:photoTem="{ row }">
    <div v-if="row.files" style="height:auto;display: flex;justify-content: space-evenly;">
        <div v-for="(item, index) in row.files" :key="index" class="photoListCss">
            <el-image 
                :ref="`previewImage_${row.id}_${index}`"
                :src="item.fileThumburl || item.fileAddress"
                :preview-src-list="row.files.map(i => i.fileAddress)"
                :initial-index="index"
                fit="contain"
                style="width: 60px; height: 60px; margin-left: 10px;"
                @click="handlePreview(row, index)">
                <div slot="placeholder">
                    加载中<span>...</span>
                </div>
            </el-image>
        </div>
    </div>
</template>
methods: {
    handlePreview(row, index) {
        this.$nextTick(() => {
            const refName = `previewImage_${row.id}_${index}`;
            if (this.$refs[refName] && this.$refs[refName][0]) {
                this.$refs[refName][0].showViewer = true;
            }
        });
    },
    // ... other existing methods ...
}

方法三：若都不生效。最终方案，重新排序数组，使当前点击的图片作为预览的第一张

 <template v-slot:photoTem="{ row }">
      <div v-if="row.files" style="height:auto;display: flex;justify-content: space-evenly;">
          <div v-for="(item, index) in row.files" :key="index" class="photoListCss">
            <el-image :src="item.fileThumburl || item.fileAddress"
                :preview-src-list="getImgList(row, index)" fit="contain"
                 style="width: 60px; height: 60px; margin-left: 10px;">
                 <div slot="placeholder">
                 	加载中<span>...</span>
                  </div>
            </el-image>
           </div>
       </div>
</template>
 methods: {
        getImgList(row, index) {
            // 重新排序数组，使当前点击的图片作为预览的第一张
            let imgArr = row.files.map(i => i.fileAddress)
            let newArr = [imgArr[index], ...imgArr.slice(index + 1, imgArr.length), ...imgArr.slice(0, index),];
            return newArr
        },
 }