el-image 文字触发大图预览

Posted 2022-12-19 沿着路走到底

html

<el-table-column
                label="转账凭证"
                width="140"
            >
                <template slot-scope="scope">
                    <div class="transfer" v-if="(scope.row.imgList && scope.row.imgList.length)">
                        共scope.row.imgList.length张
                        <div 
                            class="review-btn"
                            @click="onPreview(scope.$index)"
                        >
                            查看
                        </div>
                        <el-image
                            v-if="(currentIndex === scope.$index)"
                            class="hideImgDiv"
                            ref="preview"
                            :src="scope.row.imgList[0]"
                            :preview-src-list="scope.row.imgList"
                        >
                        </el-image>
                    </div>
                    <div v-else>无</div>
                </template>
</el-table-column>

js 打开大图预览

onPreview(index) 
            this.currentIndex = index
            this.$nextTick(() => 
                this.$refs.preview.clickHandler()
            )
,

css 隐藏缩略图

.hideImgDiv 
  /deep/ .el-image__inner 
    display: none;
  

1