Vue导出报表功能【动态表头+动态列】

安装依赖包

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

创建export-excel.vue组件

代码内容如下(以element-ui样式代码示例):

<template><el-button type="primary" @click="ExportTable" plain>导出数据</el-button>
</template>
<script >
export default {data(){return{excelData:[],      }},props:{selectData: {type: Array,default: function(){return [];}},header: {type: Array,default: function(){return [];}},filterVal: {type: Array,default: function(){return [];}},excelName: {type: String,default: "",}},methods:{
// 列表选中数据下载 !!!有选中需求就写,没选中框就不写,非必要判断ExportTable() {if (this.selectData.length === 0) {this.$message({message: '要导出的数据为空',type: 'warning'});return;}//element 的UIthis.$confirm('确定下载列表文件?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {this.excelData = this.selectData // selectData是一个数组,存储表格中选择的行的数据。this.export2Excel()}).catch(() => {})// let that = this;// this.$confirm({//  title: '提示',//  content: '确定下载列表文件?',//  onOk() {//  that.excelData = that.selectData // selectData是一个数组,存储表格中选择的行的数据。//    that.export2Excel();// },//  onCancel() {},// });},// 数据写入excelexport2Excel() {var that = thisrequire.ensure([], () => {const { export_json_to_excel } = require('@/components/excel/Export2Excel') // 这里必须使用绝对路径,使用@/+存放export2Excel的路径,安装完依赖包会自动出现这个js,没有的话检查下安装的依赖是否成功const list = that.excelDataFormat(that.excelData)const data = that.formatJson(that.filterVal, list)export_json_to_excel(that.header, data, that.getExcelName()) // 导出的表格名称,根据需要自己命名})// this.$emit('clearSelection');},// 格式转换,直接复制即可formatJson(filterVal, jsonData) {return jsonData.map((v) => filterVal.map((j) => v[j]))},// 导出excel数据预处理excelDataFormat() {let list = this.excelDatafor (var i = 0; i < list.length; i++) {list[i].createTime = this.timeChange(list[i].createTime)list[i].lastLoginTime = this.timeChange(list[i].lastLoginTime)}return list},// excel文档名生成 取时间getExcelName() {let dt = new Date()return this.excelName + dt.toLocaleString()},// 时间格式转化timeChange(originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`},      }
}
</script>
<style scoped></style>

代码调用

<el-form ref="params" :model="params"><ExportExcel:selecData="allData":header="excelHeader":filterVal="excelColumnName":excelName="excelName"></ExportExcel>
</el-form><script>
import ExportExcel from '../../excel/export-excel' //export-excel组件代码存放路径
export default{data(){//字段定义tableColumns:[],ListAll:[],title:[],allData:[],//定义导出报表需要的数据,表头,列及表名excelHeader:[],excelColumnName:[],excelName:""},methods:{getData(){const columnHeader = {}//如果有固定字段可以在这里先赋值columnHeader['字段名'] = {prop:`字段名`,label:`字段描述`}this.$api.queryList(this.params).then((res)=>{//这里的取值根据自己的返回结果来this.ListAll = res.data.list //数据//这里是把字段名,单独拆开了,title只传的列名,//后端数据格式为HashMap,例{key:value,字段1:描述1,字段2:描述2,字段3:描述3....}this.title=res.title for(let key in this.title){let value=this.title[key]columnHeader[key]={prop:`${key}`,label:`${value}`}//这里根据我的需求,列名是动态的,在这里直接赋值this.excelColumnName.push(key)this.excelHeader.push(value)//中文描述,这些都是后端处理过的}this.tableColumns = columnHeader//完成,list不用做处理了,在el-table赋值就可以了this.allData = res.data.listthis.excelName=this.params.fild  //表名根据自己需求,非固定写法})}}
}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZUC256 Go Go Go!!!

文章目录 背景运行效果代码 背景 因业务需要使用ZUC算法&#xff0c;GitHub上又没有对ZUC256相对应的Go语言的实现。 吃水不忘挖井人&#xff0c;在这里感谢GmSSL及BouncyCastle两个强大的密码学库&#xff01; 本ZUC256的编写&#xff0c;参考了这两个库及中科院软件院发布的…

力扣打卡12:复原IP地址

链接&#xff1a;93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 这道题需要对字符串进行操作&#xff0c;我选择了三层循环&#xff0c;其实还可以递归。 我在循环时进行了剪枝&#xff0c;比如一些情况直接跳出循环。 我的代码&#xff1a; class Solution { p…

The ‘.git/hooks/pre-push‘ hook was ignored because it‘s not set as executable.

Mac上使用Git提交代码提示&#xff1a; hint: The .git/hooks/prepare-commit-msg hook was ignored because its not set as executable. hint: You can disable this warning with git config advice.ignoredHook false. hint: The .git/hooks/commit-msg hook was ignored b…

【实践·专业课】内存管理-存储管理-文件系统

1. 基于Linux的简单区块链实现 1.1. 环境准备 确保使用的 Linux 系统&#xff08;如 Ubuntu、CentOS 等&#xff09;已安装 Python 3。 在终端输入python3命令&#xff0c;若出现 Python 解释器的版本信息等提示&#xff0c;则表示已安装&#xff1b; 若提示未找到命令&…

MySQL 学习 之 批量插入数据性能问题

文章目录 现象优化 现象 在使用 kettle 同步大数据的数据到我们的 MySQL 数据库中时发现&#xff0c;数据量大时插入效率很慢&#xff0c;大约在 2000/s 优化 在 MySQL 驱动连接中添加 rewriteBatchedStatementstrue 参数&#xff0c;减少 网络 IO DB IO 耗时 默认关闭指定…

2个GitHub上最近比较火的Java开源项目

1. SpringBlade 微服务架构 标题 SpringBlade 微服务架构 摘要 SpringBlade 是一个由商业级项目升级优化而来的微服务架构&#xff0c;采用Spring Boot 3.2、Spring Cloud 2023等核心技术构建&#xff0c;遵循阿里巴巴编码规范&#xff0c;提供基于React和Vue的两个前端框架&am…

MongoDB 建模调优change stream实战

MongoDB开发规范 &#xff08;1&#xff09;命名原则。数据库、集合命名需要简单易懂&#xff0c;数据库名使用小写字符&#xff0c;集合名称使用统一命名风格&#xff0c;可以统一大小写或使用驼峰式命名。数据库名和集合名称均不能超过64个字符。 &#xff08;2&#xff09…

Ubuntu 环境美化

一、终端选择 zsh 参考文章使用 oh-my-zsh 美化终端 Oh My Zsh 是基于 zsh 命令行的一个扩展工具集&#xff0c;提供了丰富的扩展功能。 先安装zsh再安装Oh My Zsh 1.zsh安装 sudo apt-get install zsh 2.设置默认终端为 zsh chsh -s /bin/zsh 3.安装 oh-my-zsh 官网&…

MySQL 在线 DDL 变更的一个异常问题

文章目录 前言1. 模拟现场2. 原因推测3. 如何解决4. 误导报错后记 前言 业务执行一条 DDL engineinnodb 失败了很多次&#xff0c;报错 ERROR 1062 (23000): Duplicate entry xxx for key ‘xxx’&#xff0c;在官方文档中也提到过&#xff0c;Online DDL 期间可能会出现 ERRO…

分布式事务的前世今生-纯理论

一个可用的复杂的系统总是从可用的简单系统进化而来。反过来这句话也正确: 从零开始设计的复杂的系统从来都用不了&#xff0c;也没办法让它变的可用。 --John Gal 《系统学》 1975 1. 事务的概念 百科&#xff1a; 事务&#xff08;Transaction&#xff09;&#xff0c;一般是…

微前端框架micro-app中的数据通信机制

在微前端框架micro-app中&#xff0c;getData方法和addDataListener方法都是用于数据通信的重要工具&#xff0c;但它们在使用方式和功能上存在一些显著的差别。 getData方法 功能&#xff1a;getData方法用于直接获取micro-app框架注入的全局对象window.microApp中存储的数据…

操作系统的文件系统

文件系统的基本组成 ⽂件系统是操作系统中负责管理持久数据的⼦系统&#xff0c;说简单点&#xff0c;就是负责把⽤户的⽂件存到磁盘硬件中&#xff0c; 因为即使计算机断电了&#xff0c;磁盘⾥的数据并不会丢失&#xff0c;所以可以持久化的保存⽂件。 ⽂件系统的基本数据单位…

vue使用百度富文本编辑器

1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网&#xff1a;ueditor:rich text 富文本编辑器 - GitCode 整理好的&#xff1a;vue-ueditor: 百度编辑器JSP版 因为官方的我没用来&#xff0c;所以我自己找的另外的包…

浅谈自然语言处理技术(NLP)在银行领域的应用

自然语言处理技术(NLP)通过解析和理解海量非结构化数据,为银行领域提供了前所未有的洞察力和决策支持。这项技术的应用不仅优化了风险管理,还革新了客户服务和市场分析等多个方面。 银行系统中存在大量的非结构化信息,这些信息不仅数据量庞大,而且种类繁多,处理起来相对…

nvm安装指定版本显示不存在及nvm ls-remote 列表只出现 iojs 而没有 node.js 解决办法

在使用 nvm install 18.20.3 安装 node 时会发现一直显示不存在此版本 Version 18.20.3 not found - try nvm ls-remote to browse available versions.使用 nvm ls-remote 查看可安装列表时发现&#xff0c;列表中只有 iojs 解决方法&#xff1a; 可以使用以下命令查看可安装…

算法基础 -- 背包问题类型与算法整理

背包问题类型与算法整理 1. 背包问题类型与描述 背包问题类型问题描述0-1 背包问题每种物品只能选择一次&#xff0c;求如何选择物品使得总价值最大。完全背包问题每种物品可以选择多次&#xff0c;求如何选择物品使得总价值最大。多重背包问题每种物品选择次数有限&#xff…

Linux磁盘存储概念(六)

本文为Ubuntu Linux操作系统- 第六弹 今天开始新的知识点&#xff0c;讲磁盘存储问题 上期回顾&#xff1a;Linux文件、目录权限问题 今天由帝皇侠陪伴大家学习&#xff01;&#xff01;&#xff01; 文章目录 磁盘数据组织低级格式化磁盘分区高级格式化 磁盘设备命名磁盘分区分…

鼠标右键单击Git Bash here不可用

最近在学习git时突然发现右键的git bash没反应&#xff0c;但是去点击应用图标就能正常运行&#xff0c;通常是因为你在安装git之后改变了它的目录名称或者位置&#xff0c;我就是因为安装后改变了一个文件夹的文件名导致不可用 在安装git时系统会默认给鼠标右键选项的git Bas…

DApp开发如何平衡性能与去中心化?

DApp的核心价值在于信任、透明和去中心化&#xff0c;但这些特点往往伴随着性能的瓶颈和高成本。在DApp开发中&#xff0c;如何在保证去中心化的前提下提升性能&#xff0c;成为开发者面临的重要挑战。如何实现性能与去中心化的平衡是一个重要课题。 一、为什么去中心化影响性…

计算机网络之NAT、代理服务、内网穿透、内网打洞

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络之NAT、代理服务、内网穿透、内网打洞 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论…