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-viewerv-if="showImagePreview":url-list="srcList"hide-on-click-modalteleported: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>
相关文章:
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" …...
LLaMA 2:开源的预训练和微调语言模型推理引擎 | 开源日报 No.86
facebookresearch/llama Stars: 36.0k License: NOASSERTION LLaMA 2 是一个开源项目,用于加载 LLaMA 模型并进行推理。 该项目的主要功能是提供预训练和微调后的 LLaMA 语言模型的权重和起始代码。这些模型参数范围从 7B 到 70B 不等。 以下是该项目的关键特性…...
01-AI大模型智能客服 V0.1「上」
你好,我是悦创。 首发:https://mp.weixin.qq.com/s/6MTkpWZCEbFWOcUn0Vexvw V0.1 版本我将分为上中下三篇进行书写和发布,欢迎分享和我微信进讨论群:Jiabcdefh。 计划: 会迭代好几个版本,看阅读量和点赞…...
【23真题】罕见211!数一配英二!
今天分享的是23年合肥工业大学833的信号与系统数字信号处理试题及解析。合工大833考数一英二,这样的搭配还是很少见的。 本套试卷难度分析:22年合肥工业大学833考研真题,我也发布过,若有需要,戳这里自取!平均分为80和…...
Linux 项目自动化构建工具:make/makefile
什么是 make make 是一个命令,他会在源文件的当前目录下寻找 makefile 或者 Makefile 文件执行这个文件中的代码。 makefile 文件的编写 我们先来见见猪跑,看看 make 怎么用的: 下面是 makefile 文件的内容: 这是 test.c 中的…...
android trace文件的抓取与查看方法
本地手机抓取trace 解压android trace文件的抓取与查看方法 找到config.pbtx文件,连接手机push进去 # push config.pbtx ,/data/local/tmp/为自定义push到的目录 adb push config.pbtx /data/local/tmp/ adb shell # 抓取trace, /data/loc…...
ffmpeg开发 环境配置
ffmpeg开发简图 1 下载ffmpeg开发包 https://ffmpeg.org/download.html 包含三个版本:Static、Shared以及Dev Static --- 包含3个应用程序:ffmpeg.exe , ffplay.exe , ffprobe.exe,体积都很大,相关的DLL已经被编译到exe里面去…...
C++STL——string类详解及其模拟实现
CSTL——string类 1. STL简介 STL全称standard template libaray,译为标准模板库 需要注意,STL不是C的标准库,而是C标准库的重要组成部分STL是一个包含众多数据结构和算法的软件框架 下面展示STL的六大组件: 本章,我…...
使用Three.js创建导航立方体
什么是导航立方体? 导航立方体是一个交互式的3D控件,它允许用户通过点击和拖动立方体的各个面来改变3D视图的方向。这是一种非常直观的方式,让用户能够轻松地在3D空间中导航。 创建导航立方体 下面是一个基本的步骤,说明如何使用Three.js创建一个导航立方体: // 创建场景…...
C++初识类和对象
前言 上一期我们介绍了一些C入门的基础知识,本期我们来介绍面向对象。初步认识一下面向对象和面向过程、类、以及封装! 本期内容介绍 面向过程和面向对象 类的引入 类的定义 类的访问限定符和封装 类的作用域 类的实例化 类对象模型 this指针 一、面向…...
MYSQL where 子句
文章目录 前言MySQL where 子句语法 从命令提示符中读取数据使用PHP脚本读取数据后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:Mysql 🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力…...
系列十六、Spring IOC容器的扩展点
一、概述 Spring IOC容器的扩展点是指在IOC加载的过程中,如何对即将要创建的bean进行扩展。 二、扩展点 2.1、BeanDefinitionRegistryPostProcessor 2.1.1、概述 BeanDefinitionRegistryPostProcessor是bean定义的后置处理器,在BeanDefinition加载后&a…...
eclipse项目移到idea上部署运行
1.配置web模块 另外,模块这里,也要加上Spring 2.配置Artifact (用于tomcat) 就是从上面配置的web模块,产生的工件 3.添加lib 一般是在web-inf/lib , 遇到的坑: jdk版本问题,这里…...
支持向量机的算法原理
支持向量机(Support Vector Machine,简称SVM)是机器学习领域中一种常用的分类算法,它基于统计学习理论和结构风险最小化原则,具有很强的理论基础和良好的分类性能。本文将详细介绍支持向量机的算法原理,并解…...
gitlab 12升级14(解决各种报错问题)
1.这里是从自己公司的源下载的rpm包,需要换成自己的 2.从12的最后一个版本升级到14的最后一个版本 # 停服务 [rootdocker test]# gitlab-ctl stop puma && gitlab-ctl stop sidekiq && gitlab-ctl stop nginx && gitlab-ctl status# 进入…...
给element plus中动态form-item增加校验的可行方法
element plus中的form组件自带校验机制。在常规使用场景中,表单项是固定的、明确的,且数量不会太多。校验规则的使用也如下: <template><div class"edit-page"><el-form :model"formModel" ref"for…...
C++学习之值传递
c/c中存在三种传值方式,在局部函数中,对这三种传值方式传入的参数进行修改,会得到不同的结果。具体见下例: #include <stdlib.h> #include <stdio.h>static int dummny 10000;// 传值(传过来的是原始值的副本&#…...
网络视频播放卡顿原因分析
一、问题描述 某项目通过拉摄像机rtsp流转rtmp/http-flv/ws-flv的方案,使用户可以在网页中观看摄像机的视频画面。在 观看视频时偶发出现卡顿现象。 二、卡顿现象分析和解决 此问题涉及的原因较多,所以得考虑各环节的问题可能性,并根据现场实…...
Android 相机库CameraView源码解析 (二) : 拍照
1. 前言 这段时间,在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。 由于CameraView封装的比较到位,在项目前期,的确为我们节省了不少时间。 但随着项目持续深入,对于CameraView的使用进入深水区,逐…...
计算机缺少d3dx9_43.dll怎么办?5个方法快速修复d3dx9_43.dll文件
在计算机使用过程中,我们常常会遇到一些错误提示,其中之一就是“d3dx9_43.dll丢失”。这个问题可能会影响到我们的游戏体验或者软件运行。为了解决这个问题,我查阅了一些资料并尝试了多种方法。在这里,我想分享一下我对d3dx9_43.d…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
