vue3 轻量execl在线表格handsontable使用

Handsontable是一款功能强大的轻量级Excel在线表格组件，它允许开发者在Web应用中轻松创建、编辑和显示复杂的表格数据。Handsontable支持大量的自定义选项和事件，使得开发者能够灵活地满足各种业务需求。

Vue 3 版本支持

Handsontable 支持以下 Vue 3 版本：

[table]

一定要注意vue版本，否则会报错。

使用 npm 安装

此组件需要 Handsontable 库才能工作。使用 npm 安装包。

npm install handsontable @handsontable/vue3

基本用法

<template>
  <hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
</template>

<script>
  import { defineComponent } from 'vue';
  import { HotTable } from '@handsontable/vue3';
  import { registerAllModules } from 'handsontable/registry';
  import 'handsontable/dist/handsontable.full.css';

  // register Handsontable's modules
  registerAllModules();

  export default defineComponent({
    setup() {
      return {
        data: [
          ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
          ['2016', 10, 11, 12, 13],
          ['2017', 20, 11, 14, 13],
          ['2018', 30, 15, 12, 13]
        ],
      };
    },
    components: {
      HotTable,
    }
  });
</script>

运行效果

由于handsontable是开源项目，但不能商用，商用需要授权，非商用可以使用下面的licenseKey，

<hot-table
    :data="data"
    :rowHeaders="true"
    :colHeaders="true"
    licenseKey="non-commercial-and-evaluation"
  ></hot-table>

添加右键菜单

  <hot-table
    :data="data"
    :rowHeaders="true"
    :colHeaders="true"
    contextMenu=true,
    licenseKey="non-commercial-and-evaluation"
  ></hot-table>

设置为中文菜单

import "handsontable/dist/languages/zh-CN.js";

  <hot-table
    :data="data"
    :rowHeaders="true"
    :colHeaders="true"
    contextMenu=true,
    language="zh-CN"
    licenseKey="non-commercial-and-evaluation"
  ></hot-table>

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

Vue 3 版本支持

使用 npm 安装

基本用法

读者评论