vue3中使用Luckysheet

1.开源仓库及演示地址

仓库地址 gitee.com/mengshukeji…

演示地址：mengshukeji.gitee.io/luckysheetd…

2.引入方式

目前Luckysheet不支持使用npm安装包，所以引入方式只能一种是CDN引入，一种是拉下来代码打包引入。

2.1 CDN引入

在vue项目的index.html文件里引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css" />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2.2 打包引入

从仓库里将打包拉下来后执行

npm i

完成后执行

npm run build

将打包生成的dist文件夹放入public文件夹下

然后去index.html中引入

<link rel='stylesheet' href='/luckysheet/plugins/css/pluginsCss.css' />
  <link rel='stylesheet' href='/luckysheet/plugins/plugins.css' />
  <link rel='stylesheet' href='/luckysheet/css/luckysheet.css' />
  <link rel='stylesheet' href='/luckysheet/assets/iconfont/iconfont.css' />
  <script src="/luckysheet/plugins/js/plugin.js"></script>
  <script src="/luckysheet/luckysheet.umd.js"></script>

3.初始化luckysheet

<template>
  <div>
    <div id="luckysheet" class="excel" />
  </div>
</template>
<script setup>
onMounted(() => {
  init()
})

const init = () => {
  luckysheet.destroy()
  let options = {
    container: 'luckysheet', //luckysheet为容器id
    gridKey: '', // 唯一key
    title: "", // 表标题名
    lang: "zh", // 中文
    showtoolbar: false, // 是否显示工具栏
    showinfobar: false, // 是否显示顶部信息栏
    showsheetbar: false, // 是否显示底部sheet按钮
    showstatisticBar: false, // 是否显示底部计数栏
    sheetFormulaBar: false, // 是否显示公示栏
    showstatisticBarConfig: {
      count: false, // 计数栏
	    view: false, // 打印视图
      zoom: false, // 缩放
    },
    column: 10, // 列数
    row: 100, // 行数
    enableAddRow: false, // 是否允许添加行
    showtoolbarConfig: {
      frozenMode: true, // '冻结方式'
    },
    // 自定义配置单元格右击菜单
    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: true, // 筛选选区
      chart: false, // 图表生成
      image: false, // 插入图片
      link: false, // 插入链接
      data: false, // 数据验证
	    cellFormat: false // 设置单元格格式
    },
    hook: {
      // 执行单元格修改后的操作
      cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
        console.log(r, c, oldValue, newValue, isRefresh);
      }
    },
    data: [
      {
	    	"name": "",
	    	"index": "",
	    	"order":  0,
	    	"status": 1,
                "defaultRowHeight": 24, //自定义行高
                "defaultColWidth": 120, //自定义列宽
	    	"celldata": [
                ]
      },
    ]
  }
  luckysheet.create(options)
  // 设置不可编辑单元格
  luckysheet.setUneditableCells([
    {row: [0, 0], column: [0, 10]}
  ])

}
</script>
<style lang="scss" scoped>
.excel {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
</style>

4.API文档

文档地址：mengshukeji.gitee.io/LuckysheetD…

新增API

1.setUneditableCells 设置不可编辑单元格

@param {Array} ranges

不可编辑的单元格范围，由单元格坐标或单元格选区字符串组成的数组。单元格坐标格式为“行索引_列索引”。单元格选区格式为“左上角单元格坐标:右下角单元格坐标”

2.getUneditableCells 获取不可编辑单元格数据