导出excel功能,前端的解决方案
import { utils, writeFileXLSX } from 'xlsx'
// 导出excel
async exportToExcel() {// 获取要导出的业务数据(这里的接口自己改成实际使用的接口)const res = await getRuleListAPI(this.params)// 表头英文字段key(这里的数据改成接口返回的实际数据,原则是即是用来下载成export的表头又是后台返回的数据,这样才好从后台的数据里面分离出我们要的数据。)const tableHeaderKeys = ['ruleNumber', 'ruleName', 'freeDuration', 'chargeCeiling', 'chargeType', 'ruleNameView']// 表头中文字段value(这里改成需要展示的数据,一般来说和上面的英文的都是对应关系。用于表格输出后的表头)const tableHeaderValues = ['计费规则编号', '计费规则名称', '免费时长(分钟)', '收费上线(元)', '计费方式', '计费规则']// 以excel表格的顺序调整后端数据const sheetData = res.data.rows.map((item) => {const obj = {}tableHeaderKeys.forEach(key => {obj[key] = item[key]})return obj})// 创建一个工作表const worksheet = utils.json_to_sheet(sheetData)// 创建一个新的工作簿const workbook = utils.book_new()// 把工作表添加到工作簿(这个Data是表名,可以自己改)utils.book_append_sheet(workbook, worksheet, 'Data')// 改写表头(origin是起始位置的意思)utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })// 这个最后的是工作簿的名称,即文件名。writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}
这个xlsx需要npm i,官网放在这Data Export | SheetJS Community Edition
一般下载的命令是
npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz
该修改的,都用小括号括起来了。这个csdn工具的原因,只能写成这样。
相关文章:

导出excel功能,前端的解决方案
import { utils, writeFileXLSX } from xlsx // 导出excel async exportToExcel() {// 获取要导出的业务数据(这里的接口自己改成实际使用的接口)const res await getRuleListAPI(this.params)// 表头英文字段key(这里的数据改成接口返回的实…...

【lesson24】MySQL索引的理解
文章目录 建立测试表插入多条记录查看插入结果中断一下---为何IO交互要是 Page重谈page理解单个page理解多个page 页目录单页情况多页情况复盘一下InnoDB 在建立索引结构来管理数据的时候,其他数据结构为何不行?B vs B聚簇索引 VS 非聚簇索引 建立测试表…...

Oracle篇—分区索引的重建和管理(第三篇,总共五篇)
☘️博主介绍☘️: ✨又是一天没白过,我是奈斯,DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux,也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章,并且也会默默的点赞收藏加关注❣…...

前端大厂面试题探索编辑部——第一期
目录 简介 题目 单选题 题解 A选项的Content-Security-Policy http-equiv属性 content属性 B选项的CSRF 使用CSRF Token 验证Referer和Origin头 C选项的HTTP Only D选项的防止SQL注入 输入验证和转义 简介 这个是一个长系列,我会以题目为导向ÿ…...

图扑 HT UI 5.0 全新升级,开箱即用!
为顺应数字时代的不断发展,图扑 HT UI 5.0 在原有功能强大的界面组件库的基础上进行了全面升级,融入了更先进的技术、创新的设计理念以及更加智能的功能。HT UI 5.0 使用户体验更为直观、个性化,并在性能、稳定性和安全性等方面达到新的高度。…...

数据结构----链表介绍、模拟实现链表、链表的使用
文章目录 1. ArrayList存在的问题2. 链表定义2.1 链表的概念及结构2.2 链表的组合类型 3. 链表的实现3.1 单向、不带头、非循环链表的实现3.2 双向、不带头节点、非循环链表的实现 4.LinkedList的使用4.1 什么是LinkedList4.2 LinkedList的使用4.2.1. LinkedList的构造4.2.2. L…...

微信小程序如何控制元素的显示和隐藏
目录 方式一:display 方式二:wx:if 有时在微信小程序元素的显示需要通过特定的条件,比如组件的显示,通常需要在主界面有指定操作。可以通过以下两种方式控制元素的显示和隐藏。 方式一:display 在wxml或者wxss中设置display样式可以控制元素显示情况,元素默认显示,可…...

解决ssh: connect to host github.com port 22: Connection timed out
当连接 GitHub 时无法连接到 22 端口时,可以尝试将端口更换为 443 首先,尝试使用以下命令从 GitHub 克隆仓库: $ git clone gitgithub.com:xxxxx/xxxx.git my-awesome-proj如果出现以下错误信息: Cloning into my-awesome-proj…...

idea 创建 spring boot
1.创建步骤 2. 编码添加 2.1 这是自动生成的启动函数 package com.example.comxjctest4;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;SpringBootApplication public class Application {publi…...

【智能家居入门之微信小程序控制下位机】(STM32、ONENET云平台、微信小程序、HTTP协议)
实现微信小程序控制单片机外设动作 一、使用ONENET可视化组件控制单片机外设动作二、使用微信小程序控制单片机外设动作三、总结 本篇博客话接上文: https://blog.csdn.net/m0_71523511/article/details/135892908 上一篇博客实现了微信小程序接收单片机上传的数据…...

07.领域驱动设计:了解3种常见微服务架构模型的对比和分析
目录 1、概述 2、整洁架构 3、六边形架构 4、三种微服务架构模型的对比和分析 5、从三种架构模型看中台和微服务设计 5.1 中台建设要聚焦领域模型 5.2 微服务要有合理的架构分层 5.2.1 项目级微服务 5.2.2 企业级中台微服务 5.3 应用和资源的解耦与适配 6、总结 1、概…...

设计模式——模板方法模式(Template Method Pattern)
概述 模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中。模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法模式是一种基于继承的代码复用技术,它是一种类行为型模式。模板方法模式是结…...

07. STP的基本配置
文章目录 一. 初识STP1.1. STP概述1.2. STP的出现1.3. STP的作用1.4. STP的专业术语1.5. BPDU的报文格式1.6. STP的选择原则(1)选择根桥网桥原则(2)选择根端口原则 1.7. 端口状态1.8. STP报文类型1.9. STP的收敛时间 二. 实验专题…...

oracle分区范围修改与数据迁移处理
背景 由于对应用上线后流量越来越大,原来的按年自动分区性能跟不上,因此决定改成按月自动分区,同时将原有分区数据重新迁移到新的分区 步骤 修改表分区为一个月一个分区 alter table my_table set INTERVAL (NUMTOYMINTERVAL(1, month));…...

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测
回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSSVM【24年…...

SeaTunnel Web安装 一把成
安装相关jar包,以及SeaTunnel 和Web 打成的包,可以直接使用,但是需要安装MySQL客户端的分享: 链接:https://pan.baidu.com/s/1qrt1RAX38SgIpNklbQJ7pA 提取码:0kmf 1. 环境准备 环境名称版本系统环境C…...

对话泛能网程路:能源产业互联网,行至中程
泛能网的能源产业互联网的标杆价值还不仅于此。其在产业互联之外,也更大的特殊性在于其也更在成为整个碳市场的“辅助运营商”,包括电力、碳等一系列被泛能网帮助企业改造和沉淀的要素资产,都在构成着碳交易市场的未来底层。 这恰是产业互联…...

Doris简介及单机部署(超详细)
文章目录 一、Doris简介1、Doris介绍2、Doris架构 二、Doris单机部署(Centos7.9)1、下载Doris2、准备环境3、安装部署3.1 创建存储目录3.2 配置 FE3.3 启动 FE3.4 查看 FE 运行状态3.5 配置 BE3.6 启动 BE3.7 添加 BE 节点到集群3.8 查看 BE 运行状态3.9…...

Pytest 识别case规则
一、Python测试框架,主要特点有以下几点: 简单灵活,容易上手;支持参数化;能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appnium等自动化测试、接口自动化测试(pytestrequests…...

gorm+mysql查询/修改json列相关操作汇总
目录 具体操作 1,查询JSON段落指定key的值是否有等于value的 或 指定keyvalue的数据记录 2,查询JSON段落中price>19的记录 3,查询JSON段中key为k0的记录 4、JSON段落中提取指定键值对到指定结构 5,查询JSON数组是否包含…...

CMake-Cookbook 第0章 配置环境
文章目录 第0章 配置环境0.1 获取代码0.2 Docker镜像0.3 安装必要的软件0.3.1 获取CMake0.3.2 编译器0.3.3 自动化构建工具0.3.4 Python0.3.5 依赖软件0.3.5.1 BLAS和LAPACk0.3.5.2 消息传递接口(MPI)0.3.5.3 线性代数模板库0.3.5.4 Boost库0.3.5.5 交叉编译器0.3.5.6 ZeroMQ, …...

优质硬盘检测工具SMART Utility,保障您的Mac数据安全
在日常使用Mac电脑的过程中,我们经常会存储大量的重要数据,如照片、文档、视频等。然而,硬盘故障却是一件令人头疼的事情,可能会导致数据丢失、系统崩溃等严重后果。为了保障您的数据安全,我们推荐一款专业的硬盘检测工…...

Spring: alibaba代码规范校验工具checkstyle
文章目录 一、idea配置checkstyle插件二、激活CheckStyle三、配置自动格式化功能四、使用代码格式化 一、idea配置checkstyle插件 下载 Intellij IDEA Checkstyle 插件:File -> setting -> plugin通过关键字CheckStyle-IDEA搜索并安装。 安裝完成后重启idea…...

c++线程thread示例
本文章记录c创建线程,启动线程和结束线程的代码。 需要注意,编译时需要添加-lpthread依赖。 代码: ThreadTest.h #ifndef TEST_THREAD_TEST_H #define TEST_THREAD_TEST_H#include <thread> #include <mutex>class ThreadTes…...

Compose | UI组件(十一) | Spacer - 留白
文章目录 前言Spacer组件的参数说明Spacer组件的使用 总结 前言 Spacer组件是让两组件之间留有空白间隔 Spacer组件的参数说明 Spacer只有一个修饰符,修饰留空白的大小和比例,颜色 Spacer(modifier: Modifier)Spacer组件的使用 Row {Box(modifier M…...

PyTorch的nn.Module类的详细介绍
在PyTorch中,nn.Module 类是构建神经网络模型的基础类,所有自定义的层、模块或整个神经网络架构都需要继承自这个类。nn.Module 类提供了一系列属性和方法用于管理网络的结构和训练过程中的计算。 1. PyTorch中nn.Module基类的定义 在PyTorch中ÿ…...

python使用activemq库ActiveMQClient类的连接activemq并订阅、发送和接收消息
引入activemq模块:from activemq import ActiveMQClient from activemq import ActiveMQClient 是一个Python的导入语句,它从activemq模块中导入了ActiveMQClient类。 解释一下各个部分: from activemq: 这表示我们正在从一个名为activemq…...

【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系?
【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系? 文章目录 写在前面Dart是什么Dart和Flutter有什么关系? 写在前面 👏🏻 正在学 Flutter 的同学,你好! 😊 本专栏是解决 Fl…...

前后台分离跨域交互
后台处理跨域 安装插件 >: pip install django-cors-headers插件参考地址:https://github.com/ottoyiu/django-cors-headers/项目配置:dev.py # 注册app INSTALLED_APPS [...corsheaders, ]# 添加中间件 MIDDLEWARE [...corsheaders.middleware.…...

React16源码: React中处理LegacyContext相关的源码实现
LegacyContext 老的 contextAPI 也就是我们使用 childContextTypes 这种声明方式来从父节点为它的子树提供 context 内容的这么一种方式遗留的contextAPI 在 react 17 被彻底移除了,就无法使用了那么为什么要彻底移除这个contextAPI的使用方式呢?因为它…...