vue3使用xlsx库导出el-table数据

1、使用xlsx导出所有列

<el-button size="small" text type="primary" @click="exportToExcel">
          <template #icon>
            <i class="ti-download" title="导出Excel"></i>
          </template>
        </el-button>
const exportTableRef = ref()
const exportToExcel = () => {
  const tableDom = exportTableRef.value?.$el
  if (!tableDom) {
    return
  }
  const wb = XLSX.utils.table_to_book(tableDom)
  XLSX.writeFile(wb, '表格数据.xlsx')
}

2、自定义导出列

function exportExcel() {
  // swal
  //   .fire({
  //     title: '是否要导出单元阀设备列表?',
  //     text: '',
  //     icon: 'warning',
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     showCancelButton: true
  //   })
  //   .then((result) => {
  //     if (result.isConfirmed) {
  let headerArray = [
    '序号',
    '项目名称',
    '维修状态',
    '地理位置',
    '热源计划维修数量(个)',
    '热源实际维修数量(个)',
    '计划维修时间',
    '计划结束时间',
    '实际维修时间',
    '实际结束时间',
    '完成率(%)',
    '方案文件'
  ]
  filteredData.value.forEach((item: any, index: any) => {
    item.index = index + 1
  })
  let data = [headerArray].concat(
    filteredData.value.map((element: any) => {
      let rowData = [
        element.index,
        element.projectName,
        // element.maintenanceStatus,
        element.maintenanceStatus == '0'
          ? '未进行'
          : element.maintenanceStatus == '1'
            ? '进行中'
            : '已完成',
        element.address,
        element.planMaintenanceHeatSource,
        element.actualMaintenanceHeatSource,
        moment(element.planMaintenanceTime).format('YYYY-MM-DD HH:mm'),
        moment(element.planEndTime).format('YYYY-MM-DD HH:mm'),
        moment(element.actualMaintenanceTime).format('YYYY-MM-DD HH:mm'),
        moment(element.actualEndTime).format('YYYY-MM-DD HH:mm'),
        element.completeRate,
        element.planFile == null ? '-' : element.planFile.originalFilename
      ]
      return rowData
    })
  )
  let sheet = excelUtils.json_to_sheet(data, {
    skipHeader: true
  })
  let book = excelUtils.book_new()
  excelUtils.book_append_sheet(book, sheet)
  writeFile(
    book,

    '热源列表_' + moment(new Date()).format('YYYYMMDDHHmmss') + '.xlsx'
  )
  //   }
  // })
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Apache DolphinScheduler社区9月进展记录

各位热爱 Apache DolphinScheduler 的小伙伴们&#xff0c;社区 9 月月报更新啦&#xff01;这里将记录 Apache DolphinScheduler 社区每月的重要更新&#xff0c;欢迎关注&#xff01; 月度 Merge Star 感谢以下小伙伴上个月为 Apache DolphinScheduler 做的精彩贡献&#x…

postman变量,断言,参数化

环境变量 1.创建环境变量 正式环境是错误的&#xff0c;方便验证环境变化 2.在请求中添加变量 3.运行前选择环境变量 全局变量 能够在任何接口访问的变量 console中打印日志 console.log(responseBody);//将数据解析为json格式 var data JSON.parse(responseBody); conso…

qt登录界面的完善

头文件1 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QPushButton> #include<QLineEdit> #include<QLabel>class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();int btn;int btn1; signal…

ssrf学习(ctfhub靶场)

ssrf练习 目录 ssrf漏洞 漏洞形成原理&#xff08;来自网络&#xff09; 寻找ssrf漏洞&#xff0c; 靶场题目 第一题&#xff08;url探测网站下文件&#xff09; 第二关&#xff08;使用伪协议&#xff09; 关于http和file协议的理解 file协议 http协议 第三关&…

Qt-窗口布局按钮输入类

1. 窗口布局 Qt 提供了很多摆放控件的辅助工具&#xff08;又称布局管理器或者布局控件&#xff09;&#xff0c;它们可以完成两件事&#xff1a; 自动调整控件的位置&#xff0c;包括控件之间的间距、对齐等&#xff1b; 当用户调整窗口大小时&#xff0c;位于布局管理器内的…

立即升级!Windows11 24H2 正式版 V26100.2033!

今日&#xff0c;系统之家小编给您带来2024年10最新推出了Windows11 24H2正式版系统下载&#xff0c;该版本系统以微软官方Windows11 24H2 26100.2033 专业版为基础&#xff0c;展开离线制作与优化&#xff0c;安全无毒&#xff0c;且修复了之前版本存在的蓝屏、绿屏等问题&…

手机怎样改网络ip地址?内容详尽实用

随着网络技术的发展&#xff0c;更改手机IP地址已成为一种常见需求。本文将详细介绍如何在不同网络环境下更改手机IP地址&#xff0c;包括移动网络和WiFi网络&#xff0c;以及同时适用于两种网络的方法&#xff0c;内容详尽实用&#xff0c;干货满满。 一、适用于移动网络&…

计算机毕业设计 基于Python的智能停车管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

SpringBoot项目 | 瑞吉外卖 | 短信发送验证码功能改为免费的邮箱发送验证码功能 | 代码实现

0.前情提要 之前的po已经说了单独的邮箱验证码发送功能怎么实现&#xff1a; https://blog.csdn.net/qq_61551948/article/details/142641495 这篇说下如何把该功能整合到瑞吉项目里面&#xff0c;也就是把原先项目里的短信发送验证码的功能改掉&#xff0c;改为邮箱发送验证…

前端vue-配置请求拦截器

1.配置拦截器&#xff0c;记得20行的导出 2.响应拦截器&#xff0c;记得28行的导出 3.拦截器不止可以拦截&#xff0c;还可以添加内容

XILINX MIG驱动

简介 框架图 本章节主要针对MIG读写做详细介绍,首先创建BLOCK DESIGN,工程连接如下图所示: MIG IP介绍 DATAMOVER的配置这里不再做介绍,结合上篇文章讲到DATAMOVER对BRAM进行读写操作,这里通过AXI桥再加一个MIG模块,MIG模块的配置和说明如下: 1、Clock Period:…

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠 目录 文章目录 [大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠目录0. 摘要1. 核心内容3. 创新点4. 算法模型5. 实验效果6. 重要数据与实验结论7. 推荐阅读指数&#xff1a;8. 推荐理由 后记 论文…

单细胞转录组 —— simpleaf 原始数据处理

单细胞转录组 —— 原始数据处理实战&#xff08;simpleaf&#xff09; 前言 Alevin-fry 是一个快速、准确且内存节约的单细胞和单核数据处理工具。 Simpleaf 是用 Rust 编写的程序&#xff0c;它提供了一个统一且简化的界面&#xff0c;用于通过 alevin-fry 流程处理一些最…

银河麒麟桌面操作系统V10 SP1:取消安装应用的安全授权认证

银河麒麟桌面操作系统V10 SP1&#xff1a;取消安装应用的安全授权认证 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 使用银河麒麟V10 SP1安装应用时&#xff0c;若频繁遇到安全授权认证提示&#xff0c;可按以下步骤设置&#xff1a; 打开…

音频功放工作原理:【A类】

功率放大器简称功放&#xff1a;它是将小信号放大&#xff0c;这个放大包括电压和电流&#xff0c;产生更大的功率去推动音响放声。 A类功放是指在信号的整个周期内&#xff08;正弦波的正负两个半周&#xff09;&#xff0c;放大器的任何功率输出元件都不会出现电流截止&…

自由学习记录(2)

Unity打包图集相关 Draw Call 实验设置&#xff1a; 我们将创建两个场景&#xff0c;一个场景有高 Draw Call&#xff0c;另一个场景通过优化减少 Draw Call。然后对比它们的帧率&#xff08;FPS&#xff09;。 场景 1&#xff1a;高 Draw Call 场景&#xff08;无优化&…

IDE启动失败

报错&#xff1a;Cannot connect to already running IDE instance. Exception: Process 24,264 is still running 翻译&#xff1a;无法连接到已运行的IDE实例。异常:进程24,264仍在运行 打开任务管理器&#xff0c;找到PID为24264的CPU线程&#xff0c;强行结束即可。 【Ct…

基于java+springboot的旅游信息网站、旅游景区门票管理系统设计与实现

该系统是基于javaspringboot开发的旅游景区门票管理系统。是给师弟开发的大四实习作品。学习过程中&#xff0c;遇到问题可以咨询github作者。 演示地址 前台地址&#xff1a; http://travel.gitapp.cn 后台地址&#xff1a; http://travel.gitapp.cn/admin 后台管理帐号&am…

8.12 矢量图层面要素单一符号使用十二(短划线渲染边界)

8.12 矢量图层面要素单一符号使用十二(短划线渲染边界)-CSDN博客 目录 前言 短划线渲染边界&#xff08;Outline: Hashed Line&#xff09; QGis设置面符号为短划线渲染边界&#xff08;Outline: Hashed Line&#xff09; 二次开发代码实现短划线渲染边界&#xff08;Outl…

人脸表情行为识别系统源码分享

人脸表情行为识别系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…