vue3 中 使用handsontable 回显时怎么使公式生效

在 Vue3 中使用 Handsontable 回显时，可以通过在 Handsontable 的 `afterSelectionEnd` 方法中调用 `render` 方法来重新计算公式并显示。

具体做法如下：

1. 在 Vue3 中引入 Handsontable：

import { createApp } from 'vue'
import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.css'

const app = createApp(...)
app.config.globalProperties.$handsontable = Handsontable

2. 在模板中使用 Handsontable，并在 `data` 中定义表格的数据和公式：

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

<script>
export default {
  data () {
    return {
      // 表格数据
      data: [
        ["A", "B", "C"],
        [1, 2, '=A1+B1']
      ],
      // 公式定义
      formulas: {
        C2: () => `=${this.$refs.table.hotInstance.getDataAtCell(1, 0)}+${this.$refs.table.hotInstance.getDataAtCell(1, 1)}`
      }
    }
  },
  mounted () {
    const container = this.$refs.table
    const hot = this.$handsontable(container, {
      data: this.data,
      columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' }
      ],
      formulas: this.formulas,
      afterSelectionEnd: () => {
        hot.render()
      }
    })
  }
}
</script>

在上述例子中，我们通过 `formulas` 属性定义了单元格 `C2` 的公式。`formulas` 是一个对象，其属性名是单元格位置，如 `C2`，属性值是一个函数，返回单元格的公式字符串。

在 `mounted` 钩子函数中，我们首先获取表格的容器元素 `container` 并创建 Handsontable 实例 `hot`。在 `hot` 的选项中，我们将 `data` 和 `columns` 设置为表格的数据和列定义，将 `formulas` 设置为公式定义。

在 `afterSelectionEnd` 回调函数中，我们调用 `hot.render()` 方法，这会重新计算所有公式并刷新表格的显示。这样，当用户选中单元格时，公式的计算就会触发，从而使公式生效。

注意，在 `formulas` 中定义的公式字符串需要以等号 `=` 开头，以告诉 Handsontable 这是一个公式。