Vue 集成 luckySheet在线文档

基本介绍

Luckysheet ，是一款纯前端类似 excel 的在线表格，支持 excel 的大部分功能，行和列操作、单元格操作、公式和函数、图表、插入图片等功能，该插件功能强大、配置简单、完全开源。

在线案例

引入依赖的方式

官网地址

1. CDN接入

需要在 Vue 的 public 文件夹中的 index.html 中引入相关的依赖文件

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

！这个 CDN 的接入方式会一直拉取最新的依赖资源，如果想指定 luckySheet 的某个版本，需要所有依赖后面加上版本号，让依赖资源一直都是稳定版本

2. 本地引入

1. 通过 gitee 下载源文件 下载地址
   
2. 然后对源码包内的资源使用 npm install / yarn install 的方式对项目进行初始化
3. 初始化完成后，通过 npm run dev 启动，可以看到在线表格的实例功能
   
4. 使用 npm run build 打包成本地资源
   打包后的项目资源文件如下图
   
5. 把 dist 文件夹中的除 index.html 之外的所有内容复制到集成的项目中的 public 文件夹中，并将其引入
   
6. 上述步骤操作，可正确引入

使用插件

使用时需要指定一个容器用来承载表格功能

// html
<div id="container"></div>
// js
// 然后在初始化的时候调用 luckysheet 的初始化方法对容器进行初始化
let options = {
	container: "container", // 设定DOM容器的id
	title: "Luckysheet Demo", // 设定表格名称
    lang: "zh", // 设定表格语言 支持简体中文("zh")、英文("en")、繁体中文("zh_tw")和西班牙文("es")
    data: [], // 工作表的配置
    ... // 更多配置请查看 luckysheet 官网
}
// 根据配置，初始化 luckysheet 
// 在继承项目中的 index.html 引入依赖后，luckysheet 就是全局属性了，不需要额外引入
luckysheet.create(options)

本篇分享的 Vue 集成luckySheet 就到此结束了，这个效果用到的场景比较少，如果读者有更好的插件，欢迎在评论区活跃讨论。文章中的案例可以正常使用哦 ~