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>
相关推荐
2301_1472583695 分钟前
7月1日作业
java·前端·算法
汪子熙7 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
MiyueFE38 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子42 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游2 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构