VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

2023-11-11

导出excel自定义表头及自定义字段步骤:

1.安装依赖

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

2.下载Blob.js、export2Excel.js
百度网盘链接:https://pan.baidu.com/s/1iC1kWX5jd7U5J9g_L4BQ2Q
提取码: 3kv4
src下创建excel文件夹将Blob.js、export2Excel.js放入
3.添加导出按钮

<el-button round class="exportExcel1" @click="doExport">导出Excel</el-button>

4.js方法

// 导出
    doExport() {
      this.excelData = this.tableData 
      this.export2Excel() 
    },
    // 数据写入excel
    export2Excel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel') // 这里必须使用绝对路径,使用@/+存放export2Excel的路径
        const tHeader = ['日期', '交易量区间/吨', '人数/个', '交易量/吨', '区间内交易量/吨', '交易量占比/%'] // 导出的excel的表头字段可自定义
        const filterVal = ['create_time', 'sale_interval', 'num', 'totalTon', 'totalTonAver', 'totalTonRatio'] // 对象属性,对应于tHeader,即prop的值,可自定义导出字段
        const list = that.excelData // json数组对象,接口返回的数据
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'xxxx')// 导出的表格名称,可自定义
      })
    },
    // 格式转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容) 的相关文章

  • 从 thymeleaf 获取数据到模态引导程序、jquery

    我正在尝试获取模态视图的 id 这是为了更新 onclick 元素 但我找不到方法 知道如何为 boostrap 5 完成此操作 或我可以用其他方法吗 谢谢 tr a inactivate a div class modal fade mo
  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 使用 vscode 调试器调试 next.js

    我已经使用安装了一个项目创建下一个应用程序 https github com segmentio create next app 我需要使用我的编辑器 vscode 调试服务器端渲染 所以我访问过vscode recipes 如何调试 ne
  • 主干视图 DOM 元素已删除

    我一直在阅读有关 Backbone js 僵尸 或内存泄漏 问题的信息 基本上 当您不再需要该元素时 您必须从 DOM 中解除绑定并删除该元素 以确保所有事件也被删除 现在 我有一个包含几个容器的单页应用程序 div div div div
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • C#简单的制作一个窗体应用

    废话少说下面先看效果 登陆管理员 注册账号和管理账号 修改密码界面 功能界面 功能一 连接中国移动物联网平台检测温湿度 输入wendu可以查询 功能二 查看图片 功能三 读写通知管理员可以写但普通成员只可以读 功能四 计算工具 可以计算三角
  • 一百四十六、Xmanager——Xmanager5连接Xshell7并控制服务器桌面

    一 目的 由于kettle安装在Linux上 Xshell启动后需要Xmanager 而Xmanager7版本受限 没有免费版 所以就用Xmanager5去连接Xshell7 二 Xmanager5安装包来源 一 注册码 注册码 10121
  • Linux——TCP传输可靠性

    TCP传输可靠性的前提条件 重传机制 针对数据包丢失或者出现定时器超时 确认应答 停止等待协议 发送之后等待收到应答 序列号 针对数据包到达接收端主机顺序乱掉 流量控制 针对避免网络拥堵时候 针对高效传输数据包的流动窗口的控制 拥塞控制 针
  • qt中Graphic中 View的坐标和Scene的坐标不匹配的问题

    在QT中使用QGraphicView 和QGraphicsSce 时 会遇到一个这样一个问题 Scene中绘制图的坐标与View显示坐标不符 例如 直接在scene中添加直线 并且设置起点是0 0 但是我们会发现他的起点并不是0 0 如下图
  • 【数据结构入门】队列(Queue)详解(定义、销毁、入队、出队等)

    文章目录 1 前言 1 队列的概念 2 队列的结构 2 队列的实现 链式结构 1 队列的定义 2 队列的初始化 3 队列的销毁 4 入队 尾插 5 出队 头删 6 获取队列元素个数 7 获取队头元素 8 获取队尾元素 9 检查队列是否为空
  • Qt 获取程序所在路径等特殊路径的方法

    目录 经常我们的程序中需要访问一些特殊的路径 比如程序所在的路径 用户目录路径 临时文件夹等 在 Qt 中实现这几个功能所用的方法虽然都不难 但是各不相同 每次用到时还要现去查 很不方便 因此就写了这篇博客 把这几种需求的实现方式总结了一下
  • 2022春招前端最新面试题分享(牧原股份)

    牧原股份 公司及岗位信息 公司 牧原股份 岗位 前端开发工程师 地点 河南 薪资 12k 16k 面试结果 一面后暂时未接到通知 一面HR技术群面 2022 04 19 自我介绍 期望薪资 你认为你为什么值这个钱 JS常用的数据类型 分辨引
  • Spring Boot(一)

    什么是Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架 其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程 该框架使用了特定的方式来进行配置 从而使开发人员不再需要定义样板化的配置 Sp
  • UG10.0安装方法及步骤

    1 右击软件压缩包 选择解压到 UG10 64bit 选项 2 打开破解文件夹下的NX10 0 JAVA X64位exe文件 3 然后点下一步 4 下一步 5 选择安装目录 默认安装在 C Program Files Java jdk18
  • 面试华为,花了2个月才上岸,真的难呀····

    花2个月时间面试一家公司 你们觉得值吗 背景介绍 美本计算机专业 代码能力一般 之前有过两段实习以及一个学校项目经历 第一份实习是大二暑期在深圳的一家互联网公司做前端开发 第二份实习由于大三暑假回国的时间比较短 小于两个月 于是找的实习是在
  • 最大化期望算法(EM)详解

    我们知道最大似然估计的根本目的是根据抽样的到的样本 即数据 反推出最有可能的分布参数 即模型 这是一个非常典型的机器学习的思想 所以在很多领域最大似然估计有着极为广泛的应用 然而 如果已知的数据中含有某些无法观测的隐藏变量时 直接使用最大似
  • 手写Vue个人组件库———fl-Cascader

    您好 如果喜欢我的文章 可以关注我的公众号 量子前端 将不定期关注推送前端好文 接上文 封装了个人Vue组件库的Cascader级联选择器 源码附在了文章末尾 如下是文档使用说明 Cascader 级联选择器 当一个数据集合有清晰的层级结构
  • 滑动窗口的最大值java

    题目描述 给定一个数组和滑动窗口的大小 找出所有滑动窗口里数值的最大值 例如 如果输入数组 2 3 4 2 6 2 5 1 及滑动窗口的大小3 那么一共存在6个滑动窗口 他们的最大值分别为 4 4 6 6 6 5 针对数组 2 3 4 2
  • 分布式任务调度平台XXL-JOB(超详细喂嘴版)

    1 XXL JOB框架 1 0 环境 Maven3 Jdk1 8 Mysql5 7 1 1 下载源码 https github com xuxueli xxl job 1 2 中文文档 https www xuxueli com xxl j
  • Linux多线程编程---线程间同步(互斥锁、条件变量、信号量和读写锁)

    本篇博文转自http zhangxiaoya github io 2015 05 15 multi thread of c program language on linux Linux下提供了多种方式来处理线程同步 最常用的是互斥锁 条件
  • Qt5.7 Qt for Embedded Linux

    从Qt5 0开始 Qt不再包含自己的视窗系统了 QWS 对于单屏幕的情况 使用QtPlatform Abstraction是一个很好的选择 多屏的情况可以通过Wayland实现 有许多跨平台的插件可以使用 EGLFS LinuxFB KMS
  • 解析不同种类的StableDiffusion模型Models,再也不用担心该用什么了

    Stable Diffusion是一个基于Latent Diffusion Models 潜在扩散模型 LDMs 的文图生成 text to image 模型 具体来说 Stable Diffusion在 LAION 5B 的一个子集上训练
  • 《解构领域驱动设计》- 领域驱动设计统一过程

    更多内容关注微信公众号 fullstack888 领域驱动设计的核心是模型驱动设计 而模型驱动设计的核心又是领域模型 领域模型必须在统一语言的指导下获得 领域模型又可进一步细分为核心子领域 通用子领域和支撑子域 系统上下文 限界上下文 分层
  • python 中字典{ }的嵌套

    在机器学习中会用字典的嵌套来存储决策树的信息 对绘制树形图有很大的作用 其中嵌套字典的生成是一个递归的过程 如下所示 gt gt gt s a 0 no 1 flippers 0 no 1 maybe b 构造字典 gt gt gt s a
  • VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

    导出excel自定义表头及自定义字段步骤 1 安装依赖 npm install save xlsx file saver npm install D script loader 2 下载Blob js export2Excel js 百度网