elementui el-image组件 点击预览图片

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

 

<template>
  <el-container class="platform-list-page">
    <el-main class="stationList">
      <data-table
        ref="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-viewer
                    v-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.defaultStationImg
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    }
  }
}
</script>