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

渣渣灰飞

已于 2023-06-15 17:47:02 修改

阅读量2.8k

点赞数 2

文章标签： vue.js 前端 typescript

于 2023-06-15 17:41:23 首次发布

本文链接：https://blog.csdn.net/flhhly/article/details/131231965

版权

前言：

这两天一个项目，需要在页面中以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，后面渲染的直接就把前面渲染的干死了。。。嗯，感觉这点不太友好！有可以同时渲染多个的方法可以留言