vue3 中 使用handsontable创建一个带有HyperFormula的表格模板，并获取到HyperFormula的设置数据

要在Vue3中创建一个带有HyperFormula的表格模板，并获取到HyperFormula的设置数据，可以按照以下步骤操作：

1. 安装handsontable和hyper-formula：

npm install handsontable
npm install hyper-formula

2. 在组件中引入handsontable和hyper-formula：

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
import 'hyper-formula/dist/hyper-formula.css';
import hyperFormula from 'hyper-formula';

3. 在组件的template中添加一个div元素作为handsontable的容器：

<template>
  <div ref="hot"></div>
</template>

4. 在组件的mounted生命周期中创建handsontable实例，并添加HyperFormula插件：

mounted() {
  const container = this.$refs.hot;
  const data = [
    ['10', '=SUM(A1:A5)'],
    ['20', '=A1+B1'],
    ['30', '=A2+B2'],
    ['40', '=A3+B3'],
    ['50', '=A4+B4'],
  ];
  const settings = {
    data: data,
    formulas: true,
    licenseKey: 'non-commercial-and-evaluation',
    plugins: [hyperFormula],
  };
  const hot = new Handsontable(container, settings);
  this.hot = hot;
},

在上述代码中，我们创建了一个data数组作为handsontable表格的数据，同时在settings中开启了formulas，表示启用HyperFormula插件，然后将插件添加到plugins选项中。

5. 在组件中添加一个方法，用来获取HyperFormula的数据：

methods: {
  getHyperFormulaData() {
    const sheet = this.hot.getPlugin('hyperFormula').sheet();
    const data = sheet.getData();
    return data;
  },
},

在上述代码中，我们使用getPlugin方法获取HyperFormula插件实例，然后调用sheet方法获取HyperFormula表单，最后调用getData方法获取表单数据。

6. 在组件中使用getHyperFormulaData方法获取HyperFormula的数据：

const hyperFormulaData = this.getHyperFormulaData();
console.log(hyperFormulaData);

在代码中调用getHyperFormulaData方法，将返回的HyperFormula数据存储在hyperFormulaData变量中，并通过console.log打印输出。

以上就是在Vue3中使用handsontable创建一个带有HyperFormula的表格模板，并获取到HyperFormula的设置数据的步骤。