hf-sheet

基于 Luckysheet 的 Vue3 电子表格组件

安装

npm install hf-sheet

或

pnpm install hf-sheet

使用

方式一：在 HTML 中引入（推荐）

在你的 HTML 文件中引入必要的依赖文件：

<!-- 引入 Luckysheet 样式（从 hf-sheet 包中引入） -->
<link rel="stylesheet" href="/node_modules/hf-sheet/dist/luckysheet/plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="/node_modules/hf-sheet/dist/luckysheet/plugins/plugins.css" />
<link rel="stylesheet" href="/node_modules/hf-sheet/dist/luckysheet/css/luckysheet.css" />
<link rel="stylesheet" href="/node_modules/hf-sheet/dist/luckysheet/assets/iconfont/iconfont.css" />

<!-- 引入 Luckysheet 脚本（从 hf-sheet 包中引入） -->
<script src="/node_modules/hf-sheet/dist/luckysheet/plugins/js/plugin.js"></script>
<script src="/node_modules/hf-sheet/dist/luckysheet/luckysheet.umd.js"></script>
<script src="/node_modules/hf-sheet/dist/luckysheet/luckyexcel.umd.js"></script>

方式二：在 Vite 项目中使用

如果你的项目使用 Vite，可以在 vite.config.js 中配置静态资源别名：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
      'luckysheet': '/node_modules/hf-sheet/dist/luckysheet'
    }
  }
})

然后在你的入口文件（如 main.js 或 App.vue）中引入：

import 'luckysheet/plugins/css/pluginsCss.css'
import 'luckysheet/plugins/plugins.css'
import 'luckysheet/css/luckysheet.css'
import 'luckysheet/assets/iconfont/iconfont.css'

import 'luckysheet/plugins/js/plugin.js'
import 'luckysheet/luckysheet.umd.js'
import 'luckysheet/luckyexcel.umd.js'

全局注册组件

import { createApp } from "vue";
import LuckySheet from "hf-sheet";
import "hf-sheet/dist/hf-sheet.css";

const app = createApp(App);
app.use(LuckySheet);

局部使用组件

<template>
  <LuckySheet
    :dataSourceOptionsFn="getDataSourceOptions"
    @syncUpdate="handleSyncUpdate"
    @back="handleBack"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import LuckySheet from "hf-sheet";

const getDataSourceOptions = async () => {
  // 返回数据源选项
  return [
    { label: "数据源1", value: "source1" },
    { label: "数据源2", value: "source2" },
  ];
};

const handleSyncUpdate = (data) => {
  console.log("数据更新:", data);
};

const handleBack = () => {
  console.log("返回");
};
</script>

Props

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------------------- | -------------------- | -------- | ---- | ------ | | dataSourceOptionsFn | 获取数据源选项的函数 | Function | 是 | - |

Events

| 事件名 | 说明 | 回调参数 | | ---------- | ------------------ | ------------------- | | syncUpdate | 数据同步更新时触发 | (data: any) => void | | back | 返回按钮点击时触发 | () => void |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

依赖

• Vue 3.5+
• Element Plus 2.13+
• Luckysheet 2.1.13+
• jQuery 3.6.0+
• jQuery Mousewheel 3.1.12+
• UUID 8.3.2+

License

MIT

Author

alan