vue3 中 使用handsontable创建一个带有公式的表格模板

首先，需要安装 handsontable 和 @handsontable/formula 插件。

安装命令：

npm install handsontable @handsontable/formula

接着，在 Vue 组件中引入 Handsontable：

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

<script>
import Handsontable from 'handsontable';
import { registerHooks as formulaRegisterHooks } from '@handsontable/formula';

export default {
  mounted() {
    const data = [
      ['A', 'B', 'C', 'D', 'E'],
      [1, 2, 3, 4, 5],
      [6, 7, 8, 9, 10],
      [11, 12, 13, 14, 15],
      [16, 17, 18, 19, 20],
    ];
    
    const hot = new Handsontable(document.querySelector('#hot'), {
      data,
      colHeaders: true,
      rowHeaders: true,
      formulas: true,
      contextMenu: true,
      licenseKey: 'non-commercial-and-evaluation',
    });
    
    formulaRegisterHooks(hot);
  },
};
</script>

其中，`data` 是表格数据。`colHeaders` 和 `rowHeaders` 分别定义是否显示列头和行头。`formulas` 定义开启公式功能。`contextMenu` 定义开启右键菜单功能。

最后，调用 `registerHooks` 方法引入 @handsontable/formula 插件。

以上代码会渲染出一个包含公式的表格模板。可以在其中输入公式，例如 `=SUM(A2:E2)`，并回车即可自动计算结果。