vue+elementui如何实现在表格中点击按钮预览图片？

 

 

效果图如上： 

 使用el-image-viewer

重点 ： 引入

import ElImageViewer from "element-ui/packages/image/src/image-viewer"; 

<template>
  <div class="preview-table">
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column prop="stuExamcode" label="考号" align="center"> </el-table-column>
      <el-table-column prop="stuName" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="subscore" :label="subjectName" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)">点击显示图片</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-image-viewer
      v-if="showImagePreview"
      :url-list="srcList"
      hide-on-click-modal
      teleported
      :on-close="closePreview"
      style="z-index: 3000"
    />
  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { getObjectiveDetail } from "@/api/precisionTeaching/examPaper";
export default {
  components: {
    ElImageViewer
  },
  name: "",
  data() {
    return {
      showImagePreview: false,
      srcList: [],
      tableData: []
    };
  },
  created() {},
  computed: {
    classSeq() {
      return this.$store.state.user.current_class.classSeq;
    },
    classSeq() {
      return this.$store.state.user.current_class.classSeq;
    },
    grade() {
      return this.$store.state.user.current_class.grade;
    },
    subjectName() {
      return this.$store.state.user.currentSubject.subjectName;
    },
    schoolUid() {
      return this.$store.state.user.teacherInfo.schoolVo.schoolUid;
    },
    watchData() {
      const { classSeq, grade, subjectName, schoolUid } = this;
      return { classSeq, grade, subjectName, schoolUid };
    }
  },
  watch: {
    watchData: {
      handler() {
        this.getTableData();
      },
      deep: true
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 数据列表
    getTableData() {
      this.loading = true;
      getObjectiveDetail({
        act: "getElecPaper",
        schoolUid: this.schoolUid,
        grade: this.grade,
        classNo: this.classSeq,
        lesson: this.subjectName
      })
        .then(res => {
          const data = res.data;
          if (typeof data == "object") {
            if (data.code != 200) {
              this.$message({
                message: "无数据",
                type: "warning"
              });
              this.tableData = [];
            }
          } else {
            const resData = JSON.parse(data).data;
            this.tableData = resData;
            console.log(this.tableData, "res.data");
            
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    // 点击查看试卷
    handleClick(row) {
      this.showImagePreview = true;
      console.log(row, "row");
      // this.srcList = [row.pic];
      this.srcList = ["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"];
    },
    // 关闭预览
    closePreview() {
      this.showImagePreview = false;
      document.body.style.overflow = "auto";
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;

  .el-dialog__title {
    color: #333333;
    font-size: 32px;
  }
}
::v-deep .el-dialog__wrapper {
  overflow: hidden;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
::v-deep .el-dialog__body {
  height: 100vh;
  padding: 0;
}
</style>