使用：

一、准备一个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
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title>//插入部分<link rel='stylesheet' href='./plugins/css/pluginsCss.css' /><link rel='stylesheet' href='./plugins/plugins.css' /><link rel='stylesheet' href='./css/luckysheet.css' /><link rel='stylesheet' href='./assets/iconfont/iconfont.css' /><script src="/plugins/js/plugin.js"></script><script src="/luckysheet.umd.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script>
</body></html>

2、安装依赖

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

3、直接封装luckysheet组件

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

<script setup lang="ts">
import { onMounted, watch } from 'vue'const emit = defineEmits(['luckyBack'])
const props = defineProps({luckySheetId: {type: String,required: true},luckySheetData: {type: Array,required: true}
})
declare let luckysheet: anyconst luckyS = (val) => {const ddd = val.luckySheetDataconst dataA = luckysheet.transToCellData(ddd)
//这一步是为了给首行首列设置背景颜色dataA.forEach((item) => {if (item.r === 0 && item.c > 1) {item.v = {bg: '#f5e041',v: item.v}}if (item.c === 0 && item.r > 1) {item.v = {bg: '#f5e041',v: item.v}}if (item.c === 0 && item.r === 0) {item.v = {bg: '#ff0000',v: item.v}}})const options = {showtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showsheetbar: false,showstatisticBar: false, // 是否显示底部sheet按钮lang: 'zh', // 设定表格语言cellRightClickConfig: {copy: false, // 复制copyAs: false, // 复制为paste: false, // 粘贴insertRow: false, // 插入行insertColumn: false, // 插入列deleteRow: false, // 删除选中行deleteColumn: false, // 删除选中列deleteCell: false, // 删除单元格hideRow: false, // 隐藏选中行和显示选中行hideColumn: false, // 隐藏选中列和显示选中列rowHeight: false, // 行高columnWidth: false, // 列宽clear: false, // 清除内容matrix: false, // 矩阵操作选区sort: false, // 排序选区filter: false, // 筛选选区chart: false, // 图表生成image: false, // 插入图片link: false, // 插入链接data: false, // 数据验证cellFormat: false // 设置单元格格式,},enableAddRow: false, // 允许添加行enableAddBackTop: false, // 允许回顶部sheetFormulaBar: false, // 是否显示公式栏showstatisticBarConfig: {zoom: true},container: val.luckySheetId // luckysheet为容器id}console.log(options.container)options.data = [{celldata: dataA,row: 50,frozen: {   //锁定指定行列type: 'rangeBoth',range: { row_focus: 1, column_focus: 1 }}}]luckysheet.create(options)
}
watch(() => props.luckySheetData,(val) => {console.log(val, props)luckyS(props)},{ deep: true }
)onMounted(() => {luckyS(props)
})
const mouseupaa = () => {const range = luckysheet.getRange()emit('luckyBack', { range })console.log('@@@@@@@@@@@@@@22', range)
}
</script><template><div:id="luckySheetId"@mouseup="mouseupaa"style="position: relative; width: 100%; height: 95%; left: 0px"></div>
</template>
<style scoped lang="scss"></style>

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

import LuckySheet from '@/components/Luckysheet/index.vue'const luckySheetId = ref('LuckySheetId')
const luckySheetData = reactive([])// 接收传过来的值
const luckyBack = (e) => {console.log(e)
}<div>
<LuckySheetstyle="height: 80%":luckySheetId="luckySheetId":luckySheetData="luckySheetData"@luckyBack="luckyBack"
></LuckySheet>
</div>

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

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