使用葡萄城+vue实现Excel
最终实现效果如下
包含增加复选框 设置公式 设置背景颜色等,代码实在太多 有需要可留言

第一步:创建表头 请使用官网提供的网址:在线 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…...
【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录
一、import导入css样式 在项目文件中创建一个common文件夹,下面创建一个css文件夹,里面放上style.css文件,编写的是公共样式,我们现在要在App.vue中引入该样式。 在App.vue中引入该样式,这样就会使样式全局生效&#…...
跟我学C++中级篇——字节序
一、什么是字节序 在谈字节序前讲个小故事,在小说《格列佛游记》中,有两派势力为了吃鸡蛋的时候儿到底是先打破大的一端还是打破小的一端展开了战争,而且这场战争持续了很久。后来,1980年,Danny Cohen在论文"On …...
Linux网络编程5——多路IO转接
一.TCP状态时序理解 1.TCP状态理解 **CLOSED:**表示初始状态。 **LISTEN:**该状态表示服务器端的某个SOCKET处于监听状态,可以接受连接。 **SYN_SENT:**这个状态与SYN_RCVD遥相呼应,当客户端SOCKET执行CONNECT连接时…...
Redis常见
Redis 事务 什么是 Redis 事务? 你可以将 Redis 中的事务理解为:Redis 事务提供了一种将多个命令请求打包的功能。然后,再按顺序执行打包的所有命令,并且不会被中途打断。 Redis 事务实际开发中使用的非常少,功能比…...
提升 PHP 编码效率的 10 个实用函数
PHP开发者始终追求更简洁、高效的代码。幸运的是,PHP 提供了丰富的内置函数,能显著减少手动编码,提升开发效率。无论经验深浅,掌握这些函数的使用技巧都至关重要。 以下列出了 10 个可以显著加快您的编码过程的 PHP 函数…...
设计模式 行为型 访问者模式(Visitor Pattern)与 常见技术框架应用 解析
访问者模式(Visitor Pattern)是一种行为设计模式,它允许你在不改变元素类的前提下定义作用于这些元素的新操作。这种模式将算法与对象结构分离,使得可以独立地变化那些保存在复杂对象结构中的元素的操作。 假设我们有一个复杂的对…...
golang之数据库操作
1.导入必要的包 import("database/sql"_ "github.com/go-sql-driver/mysql" //使用此作为数据库驱动 ) 2.相关操作 连接数据库 使用sql.Open()函数进行数据库的连接 db, err : sql.Open("mysql", "user:passwordtcp(127.0.0.1:3306)/db…...
对话新晋 Apache SeaTunnel Committer:张圣航的开源之路与技术洞察
近日,张圣航被推选为 Apache SeaTunnel 的 Committer成员。带着对技术的热情和社区的责任,他将如何跟随 Apache SeaTunnel 社区迈向新的高度?让我们一起来聆听他的故事。 自我介绍 请您简单介绍一下自己,包括职业背景、当前的工作…...
Mac 删除ABC 输入法
参考链接:百度安全验证 Mac下删除系统自带输入法ABC,正解!_mac删除abc输入法-CSDN博客 ABC 输入法和搜狗输入法等 英文有冲突~~ 切换后还会在英文状态,可以删除 ;可能会对DNS 输入有影响,但是可以通过复…...
《机器学习》之K-means聚类
目录 一、简介 二、K-means聚类实现步骤 1、初始化数据点、确定K值 2、通过距离分配数据点 3、更新簇中心 4、 迭代更新 三、聚类效果评价方式 1、轮廓系数的定义 2、整体轮廓系数 3、使用场景 4、优点 5、缺点 6、代码实现方法 四、K-means聚类代码实现 1、API接…...
日常工作之 Elasticsearch 常用查询语句汇总
日常工作之 Elasticsearch 常用查询语句汇总 查询现有索引创建索引查询索引结构插入数据查询索引数据查看索引磁盘占用信息删除索引查看分词器分词结果指定查询数量指定条件查询数据迁移统计索引数据量更新数据 在使用 es 的过程中,总是会用到 es 的查询语句&#x…...
WeakAuras NES Script(lua)
WeakAuras NES Script 修星脚本字符串 脚本1:NES !WA:2!TMZFWXX1zDxVAs4siiRKiBN4eV(sTRKZ5Z6opYbhQQSoPtsxr(K8ENSJtS50(J3D7wV3UBF7E6hgmKOXdjKsgAvZFaPTtte0mD60XdCmmecDMKruyykDcplAZiGPfWtSsag6myGuOuq89EVDV9wPvKeGBM7U99EFVVVV33VFFB8Z2TJ8azYMlZj7Ur3QDR(…...
JVM 触发类加载的条件有哪些?
目录 一、类加载生命周期 二、主动引用 2.1、创建类的实例 2.2、访问类的静态字段或静态方法 2.3、反射 2.4、初始化类的子类时,先初始化父类 2.5、虚拟机启动时,初始化 main 方法所在的类 2.6、动态语言支持 三、被动引用 3.1、通过子类引用父…...
Android实战经验篇-增加系统分区
系列文章转如下链接: Android Display Graphics系列文章-汇总 Android实战经验篇-系列文章汇总 本文主要包括部分: 一、Android分区说明 1.1 系统分区查看 1.2 分区表修改 1.3 验证新分区 二、源码修改 2.1 generate_extra_images 2.2 fstab 2…...
深入学习 Python 量化编程
深入学习 Python 量化编程 第一章:Python 基础与量化编程环境搭建 1.1 安装必要的库 首先,你需要安装一些在量化编程中常用的 Python 库。可以通过以下命令安装这些库: pip install numpy pandas matplotlib yfinance backtrader scikit-…...
机器学习笔记——特征工程
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本笔记介绍机器学习中常见的特征工程方法、正则化方法和简要介绍强化学习。 文章目录 特征工程(Fzeature Engineering)1. 特征提取ÿ…...
4种革新性AI Agent工作流设计模式全解析
文章目录 导读:AI Agent的四种关键设计模式如下:1. 反思2. 工具使用3. 规划4. 多Agent协作 总结内容简介: 导读: AI Agent是指能够在特定环境中自主执行任务的人工智能系统,不仅接收任务,还自主制定和执行…...
【入门级】计算机网络学习
网络安全:前端开发者必知:Web安全威胁——XSS与CSRF攻击及其防范-CSDN博客 三次握手四次挥手:前端网络—三次握手四次挥手_前端三次握手-CSDN博客 http协议和https协议的区别:前端网络—http协议和https协议的区别-CSDN博客 网…...
安装 Jenkins 后无法访问用户名或密码且忘记这些凭证怎么办?
Jenkins 是一款功能强大的自动化服务器,在持续集成与交付(CI/CD)领域应用广泛。不过,用户在使用过程中,尤其是首次接触该系统或系统重启后,常常会遇到登录方面的问题。要是 Jenkins 突然要求输入用户名和密…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
