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

使用葡萄城+vue实现Excel

news 来源：原创 2025/6/16 9:18:08

最终实现效果如下

包含增加复选框设置公式设置背景颜色等，代码实在太多有需要可留言

第一步：创建表头请使用官网提供的网址：在线 Excel 编辑器 | SpreadJS 在线表格编辑器

1.点击下方+号，创建一个新的sheet页默认新创建的sheet页名字是sheet8，这个县不用管，后续会修改

2.把你需要的表头粘贴进来

3.点击左上方的文件，接着按照图示例操作，就会得到一个js文件，我这里命名为aaa.js

第二步：

在vue文件install葡萄城必要的包，我引入的仅做为参考，此处根据项目需求进行增删包

第三步：

1.创建.vue文件，并引入包

<template><div class="spread-container"><gc-spread-sheetshost-class="work-sheet"@workbookInitialized="initWorkbook"><gc-worksheet /></gc-spread-sheets></div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
import * as GC from '@grapecity/spread-sheets'
import { IO } from '@grapecity/spread-excelio'
import { saveAs } from 'file-saver'
const spreadNS = GC.Spread.Sheets
import layoutData from './aaa.js'
</script>

2.修改aaa.js

因为要import引入，所以需要修改原有的aaa.js的格式，变成图上示例的格式，具体需要修改的地方已用红色标记，其余不用修改，需要注意：one为原来的sheet8,此处可根据项目需要修改任意值

第四步：在methods中增加需要的方法

1.initWorkbook初始化工作簿

        initWorkbook(spread) {this.loading = true// 设置spread基础样式this.ininSpreadStyle(spread)// 请求数据，渲染shetthis.renderFn(spread)},

2.初始设施spread基础样式

        // 初始设施spread基础样式ininSpreadStyle(spread) {this.spread = spreadspread.removeSheet(0)// 不允许修改表单名spread.options.tabEditable = false// 不允许用户通过点击“+”按钮（默认是显示）添加工作表。spread.options.newTabVisible = false// 不允许拖拽调整那个表单顺序spread.options.allowSheetReorder = false// 设置背景色为白色spread.options.grayAreaBackColor = '#fff'// 设置滚动条宽度spread.options.tabStripRatio = 0.6// 右键菜单清空spread.contextMenu.menuData = []// 绑定点击单元格事件 spread.bind(spreadNS.Events.SelectionChanged, (e, args) => {this.checkedCellInfo.axis = args.newSelections[0]this.checkedCellInfo.nameCode = args.sheet.nameCode})},

3.请求数据渲染sheet

使用葡萄城+vue实现Excel

最终实现效果如下包含增加复选框设置公式设置背景颜色等，代码实在太多有需要可留言第一步：创建表头请使用官网提供的网址：在线 Excel 编辑器 | SpreadJS 在线表格编辑器 1.点击下方号，创建一个新的sheet页默认新创建的she…...

编程日记 2025/5/30 8:35:00

【漫话机器学习系列】042.提前停止训练的优势（Early Stopping Advantages）

提前停止训练（Early Stopping）的优势提前停止是一种有效的正则化技术，在训练模型时通过监控验证集的性能来决定训练的结束点，从而避免过拟合。以下是提前停止的主要优势： 1. 防止过拟合提前停止通过在验证集性能开…...

编程日记 2025/6/3 17:31:45

【2024遥感应用组一等奖】基于风云四号卫星的小时级大气气溶胶和颗粒物监测

作品介绍‍ 01 研究背景‍ 人口和产业的增长和集聚，增加了污染物的排放，改变了污染物的扩散条件，导致中国区域空气污染严重，是目前可持续发展面临的重大挑战之一。其中细颗粒物（PM2.5）是国内主要的空气污染物，威胁居民的身心健康，影响城市生态系统中社会、经济和自然…...

编程日记 2025/6/4 10:34:27

Cesium加载地形

Cesium的地形来源大致可以分为两种，一种是由Cesium官方提供的数据源，一种是第三方的数据源，官方源依赖于Cesium Assets，如果设置了AccessToken后，就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainPro…...

编程日记 2025/6/2 18:10:05

Spring-Cloud-Gateway-Samples，nacos为注册中心，负载均衡

背景：本想找个简单例子看下，无奈版本依赖太过复杂，花了点时间。记录下吧使用Spring Cloud Gateway作为网关服务，Nacos作为注册中心，实现对子服务的负载均衡访问。简单例子。环境要求：JDK1.8、nacos 1.3…...

编程日记 2025/5/29 13:12:29

Centos9 + Docker 安装 MySQL8.4.0 + 定时备份数据库到本地

Centos9 Docker 安装 MySQL8.4.0 定时备份数据库到本地创建目录，创建配置文件启动容器命令定时备份MySQL执行脚本Linux每日定时任务命令文件内参数其他时间参数 AT一次性定时任务创建目录，创建配置文件 $ mkdir -p /opt/mysql/conf$ vim /opt/mysql/…...

编程日记 2025/6/4 14:57:33

【开源免费】基于Vue和SpringBoot的英语知识应用网站（附论文）

本文项目编号 T 138 ，文末自助获取源码 \color{red}{T138，文末自助获取源码} T138，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/6/4 3:46:03

aws(学习笔记第二十四课) 使用sam开发step functions

aws(学习笔记第二十四课) 使用sam开发step functions 学习内容： 生成sam的step functions实例程序什么是SAM amazon Serverless Application ModelSAM程序结构SAM执行程序 1. 生成sam的step functions实例程序参照文档这里参照AWS的官方文档SAM amazon Serverl…...

编程日记 2025/6/4 4:08:29

RabbitMQ介绍与使用

RabbitMQ官网 RabbitMQ 介绍 RabbitMQ 是一个开源的消息代理和队列服务器，基于 AMQP（高级消息队列协议）标准，使用 Erlang 编程语言构建。它是消息队列（MQ）的一种，广泛应用于分布式系统中&#x…...

编程日记 2025/6/4 1:29:17

LeetCode 热题 100_腐烂的橘子（52_994_中等_C++）(图；广度优先遍历（队列）)

LeetCode 热题 100_腐烂的橘子（52_994） 题目描述：输入输出样例：题解：解题思路：思路一（广度优先遍历（队列））： 代码实现代码实现（思路一…...

编程日记 2025/6/4 3:45:47

【数学】概率论与数理统计（五）

文章目录 [toc] 二维随机向量及其分布随机向量离散型随机向量的概率分布律性质示例问题解答连续型随机向量的概率密度函数随机向量的分布函数性质连续型随机向量均匀分布边缘分布边缘概率分布律边缘概率密度函数二维正态分布示例问题解答边缘分布函数二维随机向量及其分布 …...

编程日记 2025/6/4 3:45:15

《AI模型格局演变：Claude、Gemini Flash与OpenAI的技术角力》

Anthropic的Claude模型在通用聊天模型中表现优异，但在市场份额上仍落后于OpenAI Anthropic的Claude模型在通用聊天模型中的表现优异，主要体现在以下几个方面： 1. 技术优势性能表现: Claude模型在处理复杂任务（如编程、自然语言…...

编程日记 2025/6/4 3:45:31

[0405].第05节：搭建Redis主从架构

Redis学习大纲一、3主3从的集群配置： 1.1.集群规划 1.分片集群需要的节点数量较多，这里我们搭建一个最小的分片集群，包含3个master节点，每个master包含一个slave节点，结构如下： 2.每组是一主一从&#x…...

编程日记 2025/6/3 11:04:50

01、kafka知识点综合

kafka是一个优秀大吞吐消息队列，下面我就从实用的角度来讲讲kafka中，“kafka为何有大吞吐的机制”，“数据不丢失问题”，“精准一次消费问题” 01、kafka的架构组织和运行原理 kafka集群各个节点的名称叫broker，因为kaf…...

编程日记 2025/6/3 11:04:34

K8S集群常用命令

1，查看pod kubectl get pods -A 查看所有的pod kubectl get pods 这个只查看namespace为default下的pod，也就是只查看默认命名空间下的pod kubectl get pod -A -o wide 查看所有的pod，并且放出的信息更全（包含了pod的ip&#xff0…...

编程日记 2025/6/3 3:26:11

数据集-目标检测系列- 石榴检测数据集 pomegranate ＞＞ DataBall

数据集-目标检测系列- 石榴检测数据集 pomegranate >> DataBall DataBall 助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(fre…...

编程日记 2025/6/2 13:37:26

【ubuntu24.04】配置ssh以root登录

ubuntu默认不能以root登录 SSH 访问 Ubuntu 时，root 用户登录提示 Access denied 的问题，通常是因为 Ubuntu 默认禁用了 root 用户通过 SSH 登录。这是出于安全性考虑的默认配置。原因分析默认禁用 root 登录：在 /etc/ssh/sshd_config 配置文件中，PermitRootLogin 默认…...

编程日记 2025/6/3 11:06:30

python学opencv|读取图像（二十九）使用cv2.getRotationMatrix2D()函数旋转缩放图像

【1】引言前序已经学习了如何平移图像，相关文章链接为： python学opencv|读取图像（二十七）使用cv2.warpAffine（）函数平移图像-CSDN博客在此基础上，我们尝试旋转图像的同时缩放图像。【2】…...

编程日记 2025/6/3 11:05:06

Python语言的编程范式

Python语言的编程范式探讨引言在当今的编程世界中，Python语言以其简洁、易读和强大的功能深受开发者的喜爱。作为一种多范式编程语言，Python支持多种编程风格，包括面向对象编程（OOP）、函数式编程和命令式编程等。每…...

编程日记 2025/6/2 2:11:57

JAVA多线程学习

文章目录线程相关概念线程创建继承Thread类Runnable接口多个线程同时操作同一个对象测试：实现callable接口(了解)静态代理lamda表达式线程状态线程停止线程休眠线程礼让线程相关概念线程：是进程的一部分，一个进程之内的线程之间共享进程的…...

编程日记 2025/6/3 11:06:14

【c语言】指针（完结）

一、sizeof和strlen的对比 1、sizeof 前面我们在学习操作符的时候，我们学习了sizeof，知道其是计算变量所占内存的大小的，单位是字节，如果操作数是数据类型的话，计算的就是这个类型的变量所占的内存空间的大…...

编程日记 2025/6/3 11:05:26

vue使用自动化导入api插件unplugin-auto-import，避免频繁手动导入

‌unplugin-auto-import‌是一个现代的自动导入插件，旨在简化前端开发中的导入过程，减少手动导入的繁琐工作，提升开发效率。它支持多种构建工具，包括Vite、Webpack、Rollup和esbuild，并且可以与TypeScript配合使用&…...

编程日记 2025/6/2 13:32:13

matlab函数讲解——randsample

在MATLAB中，randsample函数用于从一个给定的集合中随机选择样本。函数的基本用法是从指定范围内随机选择元素，具体用法如下： 用法 y randsample(n, k, true, w)参数说明 n: 整数，表示从1到n的集合中进行抽样。例如，…...

编程日记 2025/6/4 13:33:24

50_Lua垃圾回收

1.Lua垃圾回收机制概述 Lua采用了一种自动内存管理机制，称为垃圾回收（Garbage Collection, GC）。垃圾回收的主要目的是回收程序中不再被使用的内存，从而避免内存泄漏。Lua的垃圾回收器负责回收动态分配的对象，如函数、用户数据、表、字符串、线程、内部结构等。Lua的垃圾…...

编程日记 2025/6/3 14:45:22

【Python】数据容器：列表，元组，字符串，集合字典及通用操作

文章目录一.序列1.1list列表定义常用操作列表的遍历 1.2tuple元组定义常见操作元组的遍历 1.3str字符串定义常见操作字符串的遍历 1.4序列常用操作——切片二.set集合定义常见操作集合的遍历三.dict字典定义常用操作字典的嵌套 *数据容器对比总结四.数据容器的通用操作4.1通…...

编程日记 2025/6/3 14:47:32

Wi-Fi Direct （P2P）原理及功能介绍

目录 Wi-Fi Direct （P2P）介绍Wi-Fi Direct P2P 概述P2P-GO（P2P Group Owner）工作流程 wifi-Direct使用windows11 wifi-directOpenwrtwifi的concurrent mode Linux环境下的配置工具必联wifi芯片P2P支持REF Wi-Fi Direct &#xff…...

编程日记 2025/6/3 14:46:45

系统看门狗配置--以ubuntu为例

linux系统配置看门狗以 ubuntu 系统配置看门狗为例配置看门狗使用的脚本文件，需要使用管理员权限来执行： 配置是：系统每 30S 喂一次狗，超过 60S 不进行投喂，就会自动重启。 1. 系统脚本内容： #!/bin/b…...

编程日记 2025/6/3 14:47:17

Mysql--基础篇--多表查询（JOIN，笛卡尔积）

在MySQL中，多表查询（也称为联表查询或JOIN操作）是数据库操作中非常常见的需求。通过多表查询，你可以从多个表中获取相关数据，并根据一定的条件将它们组合在一起。MySQL支持多种类型的JOIN操作，每种JOIN都有…...

编程日记 2025/6/3 14:45:38

44_Lua迭代器

在Lua中，迭代器是一种用于遍历集合元素的重要工具。掌握迭代器的使用方法，对于提高Lua编程的效率和代码的可读性具有重要意义。 1.迭代器概述 1.1 迭代器介绍迭代器是一种设计模式，它提供了一种访问集合元素的方法，而不需要暴露其底层结构。在Lua中，迭代器通常以一个函…...

编程日记 2025/6/3 14:46:12

网络原理（三）—— 传输层之 UDP 和 TCP协议

传输层在传输层两大关键的协议就是UDP和TCP协议了，除此之外，还有别的传输层协议，本文章将介绍UDP和TCP协议，重点介绍TCP协议。首先回顾TCP和UDP 的特点： UDP：不可靠传输，面向数据包&#xf…...

编程日记 2025/6/3 14:47:01

Swin Transformer模型详解(附pytorch实现)

写在前面 Swin Transformer（Shifted Window Transformer）是一种新颖的视觉Transformer模型，在2021年由微软亚洲研究院提出。这一模型提出了一种基于局部窗口的自注意力机制，显著改善了Vision Transformer（ViT&#xf…...

编程日记 2025/6/3 14:45:54

opencv进行人脸识别环境搭建

1. 构建人脸识别环境 1) 下载安装opencv 下载地址：Releases - OpenCV 参考博文：OpenCV下载安装教程（Windows）-CSDN博客下载对应系统的opencv，如windows版，opencv-4.5.5-vc14_vc15.exe 2) 然后解压缩到…...

编程日记 2025/6/3 8:03:41

java小灶课详解：关于char和string的区别和对应的详细操作

char和string的区别与操作详解在编程语言中，char和string是用于处理字符和字符串的两种重要数据类型。它们在存储、操作和应用场景上存在显著差异。本文将从以下几个方面详细解析两者的区别及常见操作。 1. 基本定义与存储差异 char： 定义：…...

编程日记 2025/6/3 19:08:16

计算机网络之---RIP协议

RIP协议的作用 RIP (Routing Information Protocol) 协议是一个基于距离矢量的路由协议，它在网络中用来动态地交换路由信息。RIP 是最早的路由协议之一，通常用于小型和中型网络中。它的工作原理简单，易于实现，但在一些大型网络中效…...

编程日记 2025/6/3 6:07:45

F#语言的文件操作

F#语言的文件操作 F#是一种功能性编程语言，运行在.NET平台上，特别适合处理并发和复杂的数据处理任务。在这篇文章中，我们将介绍F#语言中的文件操作，包括读取、写入和管理文件的基本方法。通过实例来帮助理解，适合初学…...

编程日记 2025/6/3 23:10:01

微信小程序开发设置支持scss文件

在微信小程序开发中，默认是不支持scss文件的，创建文件的时候，css文件默认创建的是wxss后缀结尾的，但是用习惯了scss的怎么办呢？ 首先找到project.config.json文件，打开文件在setting下设置useCompilerPlug…...

编程日记 2025/6/3 22:41:32

【Excel笔记_3】execl的单元格是#DIV/0!，判断如果是这个，则该单元格等于空

在 Excel 中，可以使用 IF 函数来判断单元格是否是 #DIV/0! 错误，并将其替换为空值（即空字符串 ""）。具体公式如下： IF(ISERROR(A1), "", A1)或者，如果只想判断 #DIV/0! 错误&#xff…...

编程日记 2025/6/3 23:09:44

51单片机入门基础

目录一、基础知识储备 （一）了解51单片机的基本概念 （二）掌握数字电路基础 （三）学习C语言编程基础二、开发环境搭建 （一）硬件准备 （二）软件准备三、…...

编程日记 2025/6/3 23:08:07

设计模式行为型访问者模式（Visitor Pattern）与常见技术框架应用解析

访问者模式（Visitor Pattern）是一种行为设计模式，它允许你在不改变元素类的前提下定义作用于这些元素的新操作。这种模式将算法与对象结构分离，使得可以独立地变化那些保存在复杂对象结构中的元素的操作。假设我们有一个复杂的对…...

编程日记 2025/6/3 23:08:39

stable diffusion 量化学习笔记

文章目录一、一些tensorRT背景及使用介绍1）深度学习介绍2）TensorRT优化策略介绍3）TensorRT基础使用流程4）dynamic shape 模式5）TensorRT模型转换二、TensorRT转onnx模型1）onnx介绍2）背景知识&…...

编程日记 2025/6/3 23:09:28

金融项目实战 04|JMeter实现自动化脚本接口测试及持续集成

目录一、⾃动化测试理论二、自动化脚本 1、添加断言 1️⃣注册、登录 2️⃣认证、充值、开户、投资 2、可重复执行：清除测试数据脚本按指定顺序执行 1️⃣如何可以做到可重复执⾏？ 2️⃣清除测试数据：连接数据库setup线程组 ①明确…...

编程日记 2025/6/3 23:08:23

无需昂贵GPU：本地部署开源AI项目LocalAI在消费级硬件上运行大模型

无需昂贵GPU：本地部署开源AI项目LocalAI在消费级硬件上运行大模型随着人工智能技术的快速发展，越来越多的AI模型被广泛应用于各个领域。然而，运行这些模型通常需要高性能的硬件支持，特别是GPU（图形处理器&#xff09…...

编程日记 2025/6/3 23:08:55

一.搭建环境 1.安装chrome #下载chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb#安装chrome apt --fix-broken install ./google-chrome-stable_current_amd64.deb2.安装chromedriver 首先先查看版本：google-chrome --…...

编程日记 2025/6/3 16:41:52

SOME/IP协议详解基础解读涵盖SOME/IP协议解析 SOME/IP通讯机制协议特点错误处理机制

车载以太网协议栈总共可划分为五层，分别为物理层，数据链路层，网络层，传输层，应用层，其中今天所要介绍的内容SOME/IP就是一种应用层协议。 SOME/IP协议内容按照AUTOSAR中的描述，我们可以更进一步…...

编程日记 2025/6/3 0:42:51

nginx 实现正向代理、反向代理、SSL（证书配置）、负载均衡、虚拟域名，使用其他中间件监控

我们可以详细地配置 Nginx 来实现正向代理、反向代理、SSL、负载均衡和虚拟域名。同时，我会介绍如何使用一些中间件来监控 Nginx 的状态和性能。 1. 安装 Nginx 如果你还没有安装 Nginx，可以通过以下命令进行安装（以 Ubuntu 为例&#xff0…...

编程日记 2025/6/3 16:43:11

基于单片机的智能花卉浇水系统的设计与实现

摘要： 随着人们生活水平的不断提高，生活节奏也越来越快。人们经常忽视办公室或者家居的花卉，忘记浇水。本文设计了一种基于单片机的智能浇水系统。目的是解决养殖花卉的人忘记浇水的问题。本系统以单片机AT89S52为控制芯片，能够按…...

编程日记 2025/6/3 16:43:43

《使用 YOLOV8 和 KerasCV 进行高效目标检测》

《使用 YOLOV8 和 KerasCV 进行高效目标检测》作者：Gitesh Chawda创建日期：2023/06/26最后修改时间：2023/06/26描述：使用 KerasCV 训练自定义 YOLOV8 对象检测模型。 （i） 此示例使用 Keras 2 在 Colab 中…...

编程日记 2025/6/3 16:42:08

【Domain Generalization(3)】领域泛化与文生图之 -- QUOTA 任意领域中的生成物体的数量可控

系列文章目录【Domain Generalization(1)】增量学习/在线学习/持续学习/迁移学习/多任务学习/元学习/领域适应/领域泛化概念理解第一篇了解了 DG 的概念，那么接下来将介绍 DG 近年在文生图中的相关应用/代表性工作。【Domain Generalization(2)】领域泛化在文生图…...

编程日记 2025/6/3 16:42:39

qml XmlListModel详解

1、概述 XmlListModel是QtQuick用于从XML数据创建只读模型的组件。它可以作为各种view元素的数据源，比如ListView、GridView、PathView等；也可以作为其他和model交互的元素的数据源。通过XmlRole定义角色，如name、age和height，并…...

编程日记 2025/6/3 16:43:27

CAPL如何设置TCP/IP传输层动态端口范围

在TCP/IP协议中，应用程序通过传输层协议TCP/UDP传输数据，接收方传输层收到数据后，根据传输层端口号把接收的数据上交给正确的应用程序。我们可以简单地认为传输层端口号是应用程序的标识，这就是为什么我们说应用程序在使用TCP/IP协议通信时要打开传输层端口号或者绑定端口号…...

编程日记 2025/6/3 16:42:23

相关文章：