概要
vue3 + vite 封装 Luckysheet
提示:这里用到vue3.3 + luckysheet2.1.3
具体实现流程
先上图:
具体代码
安装也,可以用npm或者yarn
pnpm install luckysheet -S
这里比较重要,需要引入对应文件,每个文件都需要引入,否则显示不出来,官方文档
https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/#%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4
<!-- 目录根据项目路径,可以放在 public-->
<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>
组件代码
<!-- html 部分-->
<template>
<div id="luckysheet" class="luckysheet-content"></div>
</template>
<script setup lang='ts'>
import luckysheet from 'luckysheet'
import { mergeTypes, rowPublicType, borderInfoTypes, authorityTypes } from './types'
import { onMounted } from 'vue'
defineOptions({
name: 'Luckyexcel'
})
interface Props {
data: any[]
title?: string
merge?: mergeTypes //合并单元格
rowlen?: rowPublicType //表格行高
columnlen?: rowPublicType //表格列宽
rowhidden?: rowPublicType //隐藏行
colhidden?: rowPublicType //隐藏列
borderInfo?: borderInfoTypes //边框
authority?: authorityTypes //工作表保护
}
const props = withDefaults(defineProps<Props>(), {
data: () => [],
title: '默认标题',
merge: () => ({}),
rowlen: () => ({}),
columnlen: () => ({}),
rowhidden: () => ({}),
colhidden: () => ({}),
borderInfo: () => ({}),
authority: () => ({})
})
const emit = defineEmits(['cellUpdated'])
const init = () => {
luckysheet.create({
container: 'luckysheet', //luckysheet为容器id
lang: 'zh', // 设定表格语言
gridKey: Date.now(),
data: [
{
name: 'Sheet', //工作表名称
color: '', //工作表颜色
index: 0, //工作表索引
status: 1, //激活状态
order: 1, //工作表的下标
hide: 0, //是否隐藏
row: 36, //行数
column: 31, //列数
defaultRowHeight: 22, //自定义行高
defaultColWidth: 100, //自定义列宽
celldata: props.data, //初始化使用的单元格数据
config: {
merge: props.merge, //合并单元格
rowlen: props.rowlen, //表格行高
columnlen: props.columnlen, //表格列宽
rowhidden: props.rowhidden, //隐藏行
colhidden: props.colhidden, //隐藏列
borderInfo: props.borderInfo, //边框
authority: props.authority //工作表保护
},
scrollLeft: 0, //左右滚动条位置
scrollTop: 315, //上下滚动条位置
luckysheet_select_save: [], //选中的区域
calcChain: [], //公式链
isPivotTable: false, //是否数据透视表
pivotTable: {}, //数据透视表设置
filter_select: {}, //筛选范围
filter: null, //筛选配置
luckysheet_alternateformat_save: [], //交替颜色
luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
luckysheet_conditionformat_save: {}, //条件格式
frozen: {}, //冻结行列配置
chart: [], //图表配置
zoomRatio: 1, // 缩放比例
image: [], //图片
showGridLines: 1, //是否显示网格线
dataVerification: {} //数据验证配置
}
],
title: props.title,
showinfobar: false, //是否显示顶部信息栏
showtoolbar: false, //是否显示工具栏
enableAddRow: false, //允许添加行
showsheetbar: false, //是否显示底部sheet页按钮
showsheetbarConfig: {
add: false, //新增sheet
menu: false, //sheet管理菜单
sheet: false //sheet页显示
},
showstatisticBar: false, //是否显示底部计数栏
showstatisticBarConfig: {
count: false, // 计数栏
view: false, // 打印视图
zoom: false // 缩放
},
sheetFormulaBar: false, //是否显示公式栏
allowCopy: false, //是否允许拷贝
//自定义底部sheet页右击菜单
sheetRightClickConfig: {
delete: false, // 删除
copy: false, // 复制
rename: false, //重命名
color: false, //更改颜色
hide: false, //隐藏,取消隐藏
move: false //向左移,向右移
},
//自定义单元格右键菜单
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 // 设置单元格格式
},
// 自定义顶部菜单
showtoolbarConfig: {
undoRedo: true, //撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏
paintFormat: true, //格式刷
currencyFormat: false, //货币格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '减少小数位数'
numberIncrease: false, // '增加小数位数
moreFormats: false, // '更多格式'
font: false, // '字体'
fontSize: true, // '字号大小'
bold: false, // '粗体 (Ctrl+B)'
italic: false, // '斜体 (Ctrl+I)'
strikethrough: false, // '删除线 (Alt+Shift+5)'
underline: false, // '下划线 (Alt+Shift+6)'
textColor: true, // '文本颜色'
fillColor: true, // '单元格颜色'
border: true, // '边框'
mergeCell: true, // '合并单元格'
horizontalAlignMode: true, // '水平对齐方式'
verticalAlignMode: true, // '垂直对齐方式'
textWrapMode: true, // '换行方式'
textRotateMode: false, // '文本旋转方式'
image: false, // '插入图片'
link: false, // '插入链接'
chart: false, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)
postil: false, //'批注'
pivotTable: false, //'数据透视表'
function: false, // '公式'
frozenMode: false, // '冻结方式'
sortAndFilter: false, // '排序和筛选'
conditionalFormat: false, // '条件格式'
dataVerification: false, // '数据验证'
splitColumn: false, // '分列'
screenshot: true, // '截图'
findAndReplace: true, // '查找替换'
protection: false, // '工作表保护'
print: false // '打印'
},
hook: {
// 表格初始化完成后触发
cellUpdated: (r, c, oldValue, newValue, isRefresh) => {
emit('cellUpdated', { r, c, oldValue, newValue, isRefresh })
}
}
})
}
onMounted(() => {
if (props.data.length) init()
})
</script>
types文件定义的类型,这里简单定了一下
interface mergeItem {
r: number
c: number
rs: number
cs: number
}
export interface rowPublicType {
[string]: number | string
}
export interface mergeTypes {
[string]: mergeItem
}
interface borderTypes {
row_index: number
col_index: number
l?: {
style: number
color: string
}
r?: {
style: number
color: string
}
t?: {
style: number
color: string
}
b?: {
style: number
color: string
}
}
export interface borderInfoTypes {
rangeType?: string
value?: borderTypes
}
// 详细配置查看 https://dream-num.github.io/LuckysheetDocs/zh/guide/sheet.html
export interface authorityTypes {
selectLockedCells?: number
selectunLockedCells?: number
formatCells?: number
formatColumns?: number
formatRows?: number
insertColumns?: number
insertRows?: number
insertHyperlinks?: number
deleteColumns?: number
deleteRows?: number
sort?: number
filter?: number
usePivotTablereports?: number
editObjects?: number
editScenarios?: number
sheet?: number
hintText?: string
algorithmName?: string
saltValue?: string | number | Date | any
allowRangeList?: any[{
name: string
password: string
hintText: string
algorithmName: string
saltValue: any
sqref: string
}]
}
页面使用
<!-- template -->
<luckyexcel :data="data"></luckyexcel>
<script setup lang="ts">
import luckyexcel from './components/luckyexcel/index.vue' // 替换对应的路径
const data = ref([
{ r: 0, c: 0, v: { v: '标题1', bl: 1, ht: 0 } },
{ r: 0, c: 1, v: { v: '标题2', bl: 1, ht: 0 } },
{ r: 0, c: 2, v: { v: '标题3', bl: 1, ht: 0 } },
{ r: 0, c: 3, v: { v: '标题4', bl: 1, ht: 0 } }
]) // 表格数据
</script>
官方文档: https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/
小结
引入js部分不能忽视,使用 vite 时,index.html 文件不在 public 而是在根目录 ,在根目录引入即可。
另外有一个忽视了,luckysheet 依赖jquery 需要安装jquery并引入
pnpm install jquery -S
在main文件引入
import $ from "jquery";