效果：点击单个图片，查看大图

 

<template><el-container class="platform-list-page"><el-main class="stationList"><data-tableref="DataTable":default-show-type="defaultShowType":default-load-data="true"border:data-pk-column="pk":data-url="dataUrl":table-data="tableData":diff-height="isDialog()?290:190":query-params="queryParams":v-loading.sync="tableLoading"@sendTableData="getData"><template slot="card"><div v-loading="tableLoading"><div v-for="(item, index) in stationList" :key="item.projectId" class="item"><div class="content"><div class="stationImg" title="点击预览大图" @click="onPreview(item.picFileId)">// 关键部分<img :src="item.picFileId ? baseApi + '/org/FileAttachmentService/downloadFile?fileId=' + item.picFileId : defaultStationImg"><el-image-viewerv-if="showViewer":on-close="closeViewer":url-list="[stationImgUrl]"/></div></div></div></div></template></data-table></el-main></el-container>
</template>
<script>
import baseList from 'jxudp-root/jxudp-core/api/base-list.js'
import defaultStationImg from '../../assets/images/1.jpeg'
import '../../utils/formulaUtil'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {components: {ElImageViewer},data() {return {showViewer: false, // 显示查看器stationImgUrl: ''}},mounted() {},methods: {onPreview(picFileId) {this.stationImgUrl = picFileId ? `${this.baseApi}/org/FileAttachmentService/downloadFile?fileId=${picFileId}` : this.defaultStationImgthis.showViewer = true},// 关闭查看器closeViewer() {this.showViewer = false}}
}
</script>