vue3 + vite 封装 luckysheet

原创已于 2024-01-17 09:46:46 修改 · 1.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #html5 #前端框架

于 2024-01-12 18:02:29 首次发布

经验总结专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用Vite框架结合Luckysheet组件创建一个可定制的表格，包括安装、文件引入、配置参数以及组件的使用方法和注意事项，如需引入jQuery和正确处理index.html文件位置。

文章目录

概要

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>