vue3+ts+vite+element plus中使用luckysheet（预览效果）

前言：

        这两天一个项目，需要在页面中以excel的形式展示大量数据，喜欢偷懒的我果断扒拉了一堆适用于vue3的插件，下面简单说说我使用的luckysheet

使用：

一、准备一个vue3+ts+vite+element plus的项目

此处省略n个字。。。

嗯。。？先看个效果

看图就晓得，我这是只拿对自己有用的了，没用的直接全部干掉了。。

二、直接看luckysheet官网（文档写的还是非常详细的哟）

快速上手 | Luckysheet文档

三、按照教程添加luckysheet到自己项目中

1、引入方式：

        ①、cdn引入，②、下载到本地引入

cnd没啥问题，按照文档教程在index.html中卡卡一顿引入就好

重点说下下载到本地引入（因为本人使用的时候，下载打包遇到一些问题，所以直接把打包好的文件放在了网盘上，如果你下载官网提供的资源包出现npminstall 报错或者打包报错，可以直接去网盘提取）

链接：https://pan.baidu.com/s/182-mPDcVWtB4ldA0-y2ktA 
提取码：0000

当你已经有dist包的时候,你需要把dist包中所以文件(不包括index.html)引入到项目中去，我这边引入的是public静态文件中，然后在项目中index.html文件中引入

index.html




  
  
  
  

//插入部分
  
  
  
  
  
  





  

  

2、安装依赖

"exceljs": "^4.3.0",
"luckyexcel": "^1.0.1",
"luckysheet": "^2.1.13",

3、直接封装luckysheet组件

注意：封装luckysheet组件的时候要参照官方文档中的配置信息来设置

4、在需要使用的地方引入

import LuckySheet from '@/components/Luckysheet/index.vue'

const luckySheetId = ref('LuckySheetId')
const luckySheetData = reactive([])

// 接收传过来的值
const luckyBack = (e) => {
	console.log(e)
}

ok！到这里基本上完事了，大毛病没有，小毛病。。。。

遇到问题：根据luckysheet设计思路，好像一个项目中只能渲染出来一个，就算设置不同的容器id，后面渲染的直接就把前面渲染的干死了。。。嗯，感觉这点不太友好！有可以同时渲染多个的方法可以留言