前言：
这两天一个项目，需要在页面中以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
<!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: any
const luckyS = (val) => {
const ddd = val.luckySheetData
const 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>
<LuckySheet
style="height: 80%"
:luckySheetId="luckySheetId"
:luckySheetData="luckySheetData"
@luckyBack="luckyBack"
></LuckySheet>
</div>ok！到这里基本上完事了，大毛病没有，小毛病。。。。
遇到问题：根据luckysheet设计思路，好像一个项目中只能渲染出来一个，就算设置不同的容器id，后面渲染的直接就把前面渲染的干死了。。。嗯，感觉这点不太友好！有可以同时渲染多个的方法可以留言
