el-image 文字触发大图预览

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