当前位置: 首页 > news >正文

vue3-print打印eletable某一行的数据

主页面的表格

<template><el-table :data="list"><el-table-column label="操作" align="center"><template #default="scope"><el-buttonlinktype="primary"@click="handleType(scope.row)":loading="qrCodeLoading">打印</el-button></template></el-table-column></el-table>// 打印子页面<type ref="qrRef" @success="loadData"/>
</template>
<script>const qrRef = ref()
const qrCodeLoading = ref(false)/** 打印 */
const multiple = ref([])
const handleType = async (row) => {try {multiple.value.push(row)console.log('ss', multiple)qrRef.value.open(multiple)// todo 接口multiple.value = []} catch {} finally {qrCodeLoading.value = false}
}const loadData = async (arg) => {// todo 打印完毕
}</script>

 子页面---

<template><Dialogv-model="dialogVisible":title="dialogTitle"width="1000px"height="1200px"@close="handleCloseModal"><e-row><el-button type="success" plain v-print="printObj"><Icon icon="ep:download"/>打印</el-button></e-row><el-row class="row-con" id="printMe"><divv-for="item in tableData":ref="setItemRef":key="item.partCode"style="width: 100%"><div style="border: 2px black; margin-top:105px; margin-left: 54px; margin-right: 55px; margin-bottom: 8px;"><div style="width: 100%; display: flex; flex-direction: row">{{ 需要打印的内容+tableData }}</div></div></div></el-row></Dialog>
</template><script setup lang="ts">
import qrcode from 'qrcode'const dialogVisible = ref(false)
const dialogTitle = ref('条码打印')const handleCloseModal = () => {dialogVisible.value = false
}
const tableData = ref([])onMounted(() => {// console.log(t.userInfo.account)
})const itemRefs = ref([])
const setItemRef = (el) => {if (el) {itemRefs.value.push(el)}
}
const printObj = ref({id: 'printMe',popTitle: '',maxWidth: 302, // 最大宽度extraCss:'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',// extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style> #printMe { height: 302px !important; } <style>',//  可以传进去  style tag 标签;注意要逗号分隔   解决特定区域不显示问题beforeOpenCallback(vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback(vue) {vue.printLoading = falseconsole.log('执行了打印', vue)},closeCallback(vue) {console.log('关闭了打印工具', vue)}})
const open = (data) => {dialogVisible.value = trueconsole.log('data', data)tableData.value = data.valueconsole.log('tableData', tableData.value)tableData.value.forEach((item) => {//var code = 'your-data' // 替换为你需要生成二维码的数据qrcode.toDataURL(item.partCode, (err, url) => {if (err) {console.error(err)} else {console.log('toDataURL', url)}})})
}
defineExpose({open}) // 提供 open 方法,用于打开弹窗
</script>
<style scoped lang="scss">
.row-con {display: flex;flex-flow: row wrap;
}.printContainer {-webkit-print-color-adjust: exact;/* 打印时表格上边框会消失 貌似是因为 使用伪元素的缘故 */::v-deep(.el-table__inner-wrapper::after) {height: 0px !important;}/* 使用自己的表格上边框 */::v-deep(.el-table__inner-wrapper) {border-top: 1px solid #e5e7eb;}/* 打印时边框太小会被挤没,那让边框变大点就好了*/::v-deep(.el-table__cell) {border-right: 2px solid #e5e7eb;}
}</style>

相关文章:

vue3-print打印eletable某一行的数据

主页面的表格 <template><el-table :data"list"><el-table-column label"操作" align"center"><template #default"scope"><el-buttonlinktype"primary"click"handleType(scope.row)"…...

【Vue】pnpm创建Vue3+Vite项目

初始化项目 &#xff08;1&#xff09;cmd切换到指定工作目录&#xff0c;运行pnpm create vue命令&#xff0c;输入项目名称后按需安装组件 &#xff08;2&#xff09;使用vs code打开所创建的项目目录&#xff0c;Ctrl~快捷键打开终端&#xff0c;输入pnpm install下载项目…...

springboot配置多数据源

springboot配置多数据源 学习新技术&#xff0c;争做新青年&#xff0c;欢迎围观&#xff0c;河南老乡在上海请&#xff0c;加&#xff0c;微&#xff0c;andyfau2022&#xff0c; ----获取数据源&#xff1a;null&#xff0c;数据源为null时默认使用主数据源的。 1-yml文件…...

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题&#xff1a;墙体两侧特征混淆误匹配&#xff0c;导致建图和定位偏差&#xff0c;表现为过门跳变、外月台走歪等 解决思路&#xff1a;预期的根治方案IGICP需要较长时间完成上线&#xff0c;先使用切分地图的工程化方案&#xff0c;即墙体两侧切…...

ChatGPT+Simple Mind Map生成思维导图:快速提升学习效率

一、告别杂乱笔记&#xff0c;一键生成清晰思维导图&#xff01; 最近开始学习网络安全&#xff0c;一头扎进了各种协议、漏洞、防御机制的海洋中。信息量巨大&#xff0c;知识点零散&#xff0c;让我很快便陷入了“知识焦虑”——笔记越记越多&#xff0c;却越来越混乱&#…...

Day9 | Java框架 | SpringBoot

Day9 | Java框架 | SpringBoot SpringBoot简介入门程序概述起步依赖 基础配置配置文件格式&#xff1a;3种yaml语法规则yaml数据读取三种格式 多环境启动配置文件参数命令行参数多环境开发控制&#xff1a;Maven & SpringBoot 多环境兼容 配置文件分类&#xff1a;4种 整合…...

Wordpress右下角表单弹出插件

Ultimate Sticky Popup & Widgets Charcoal Making Machine | Equipment for Sale - Kingtiger...

影刀RPA实战:自动化批量生成条形码完整指南

今天我们聊聊使用影刀来实现批量生成条形码&#xff0c;条形码在零售行业运用非常广泛&#xff0c;主要作用表现在产品识别&#xff0c;库存管理&#xff0c;销售管理&#xff0c;防伪保护等&#xff0c;这些作用使其成为现代商业和工业环境中不可或缺的工具&#xff0c;它极大…...

Python Flask简介

简介 Flask 有两个主要依赖&#xff1a;路由、调试和 Web 服务器网关接口&#xff08;Web Server Gateway Interface&#xff0c;WSGI&#xff09; 子系统由&#xff1a;Werkzeug 提供模板系统由&#xff1a;Jinja2提供Werkzeug 和 Jinjia2 都是由 Flask 的核心开发者开发而成…...

视频监控平台是如何运作的?EasyCVR视频汇聚平台的高效策略与实践

随着科技的飞速发展&#xff0c;视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台&#xff0c;不仅依赖于先进的硬件设备&#xff0c;更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术&#xff0c;…...

欧拉下搭建第三方软件仓库—docker

1.创建新的文件内容 切换目录到etc底下的yum.repos.d目录&#xff0c;创建docker-ce.repo文件 [rootlocalhost yum.repos.d]# cd /etc/yum.repos.d/ [rootlocalhost yum.repos.d]# vim docker-ce.repo 编辑文件,使用阿里源镜像源&#xff0c;镜像源在编辑中需要单独复制 h…...

pcs升压变流一体机

在当今全球积极推进能源转型的大背景下&#xff0c;新能源技术的发展日新月异。其中&#xff0c;PCS 升压变流一体机作为一种关键的能源转换设备&#xff0c;正发挥着越来越重要的作用。它一般可分为10KV与35KV等级的。 PCS 升压变流一体机&#xff0c;全称为 Power Conversion…...

上海泗博EtherNet/IP转PROFIBUS DP网关EPS-320IP成都地铁项目应用案例

背景&#xff1a; 地铁&#xff0c;作为城市的活力脉搏&#xff0c;不仅是衔接城市生活的关键纽带&#xff0c;更是现代城市交通体系中不可或缺的核心组成部分。因此&#xff0c;确保地铁的稳定运行对任何一座城市都至关重要。 上海泗博自动化&#xff0c;作为与成都地铁项目合…...

猫鼠游戏: KaijiK病毒入侵溯源分析

1. 事件背景 近期&#xff0c;网宿平台某客户在使用云主机工作的时候突然出现主机卡顿&#xff0c;连接不稳定&#xff0c;网络断开的情况&#xff0c;并且收到了网宿主机入侵检测产品的告警信息。由于客户没有专职的安全人员&#xff0c;由运维人员兼任安全运营工作&#xff…...

【Hot100算法刷题集】双指针-02-盛水最多的容器(含暴力枚举、双指针法及其合理性证明)

&#x1f3e0;关于专栏&#xff1a;专栏用于记录LeetCode中Hot100专题的所有题目 &#x1f3af;每日努力一点点&#xff0c;技术变化看得见 题目转载 题目描述 &#x1f512;link->题目跳转链接 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的…...

Spring和Spring FrameWork有什么关系?两者是同一个东西吗?

Spring和Spring Framework之间的关系可以归结为以下几点&#xff1a; 广义与狭义的理解 广义上的Spring&#xff1a; 广义上的Spring泛指以Spring Framework为基础的整个Spring技术栈。Spring已经发展成为一个由多个不同子项目&#xff08;模块&#xff09;组成的成熟技术体系…...

windows10 python 解决鼠标右键菜单中没有Edit with IDLE(不使用注册表编辑器)

随便选择一个py文件&#xff0c;右击打开属性。 打开方式&#xff1a;点击更改。 最下面&#xff1a;点击更多应用&#xff0c;点击在这台电脑上查找应用 搜索找到你自己按照的python路径下 Python39\Lib\idlelib\idle.bat 文件 点击打开&#xff0c;结束。...

一些深度学习相关指令

// 服务器上查看所有的环境版本 conda env list// 删除某一个环境 conda remove -n 环境名 --all终端输入命令&#xff1a;nvidia-smi&#xff0c;可以看显卡的使用情况指定使用哪张显卡&#xff1a; os.environ["CUDA_VISIBLE_DEVICES"] 2查看服务器的cuda版本&am…...

Python 实现自动配置华为交换机

Python 实现自动配置华为交换机 在网络运维中&#xff0c;配置交换机是非常重要的一步。如果我们可以使用 Python 来实现配置交换机&#xff0c;那么我们的工作效率将会大大提高。在本文中&#xff0c;我们将学习如何使用 Python 配置华为交换机。 背景知识 华为交换机是一种…...

上海亚商投顾:沪指探底回升 华为产业链午后爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日探底回升&#xff0c;深成指、创业板指盘中跌逾1%&#xff0c;午后集体拉升翻红。华为产业链午后走强…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...