vue3 使用handsontable示例

安装

yarn add handsontable @handsontable/vue3

demo 组件示例

<template>
  <div>
    <hot-table width="100%" height="500" :settings="settings" ref="hotTableComponent"></hot-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive, toRefs } from 'vue';
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css'; // 表格样式
import { registerAllModules } from 'handsontable/registry'; // 注册所有模块
import 'handsontable/languages/zh-CN'; // 汉语包
registerAllModules();

// 导入和注册插件和单元格类型
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerCellType(NumericCellType);
registerPlugin(UndoRedo);

export default defineComponent({
  components: { HotTable },

  setup() {
    const hotTableComponent = ref<InstanceType<typeof HotTable> | null>(null);
    let hotInstance: any = null;

    const state = reactive({
      settings: {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', // 去除底部非商用声明

        colHeaders: ["病人姓名", "病人身份证号", "病人类型"],

        columns: [
          { data: "病人姓名", type: "text" },
          { data: "病人身份证号", type: "text" },
          { data: "病人类型", type: "text" }
        ],

        data: [
          { "病人姓名": "测试", "病人身份证号": "123456789", "病人类型": "贫困户" },
          { "病人姓名": "张三", "病人身份证号": "369258147", "病人类型": "贫困户" }
        ],

        currentRowClassName: 'currentRow', // 突出显示行
        currentColClassName: 'currentCol', // 突出显示列
        minSpareRows: 2, // 行留白
        autoWrapRow: false, // 自动换行
        minRows: 2100,
        trimWhitespace: false, // 去除空格
        rowHeaderWidth: 100, // 单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        rowHeaders: true, // 行标题
        formulas: false, // 公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, // 复制粘贴
        filters: false, // 允许通过内置组件或 API 过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, // 右键菜单
      }
    });

    // 在组件挂载后获取 handsontable 实例
    onMounted(() => {
      if (hotTableComponent.value) {
        hotInstance = hotTableComponent.value.hotInstance;
        console.log('Handsontable instance:', hotInstance);
        
        // 现在你可以安全地调用 hotInstance 的方法了
        // 例如获取源数据或数据
        console.log('Source Data:', hotInstance.getSourceData());
        console.log('Data:', hotInstance.getData());
      }
    });

    return {
      ...toRefs(state),
      hotTableComponent,
    };
  },
});
</script>

<style scoped>
/* 根据需要添加自定义样式 */
</style>