VUE <script setup lang="ts"> 使用 x-data-spreadsheet 示例

可以参考以下代码示例：

<template>
  <div class="spreadsheet-container">
    <x-data-spreadsheet
      v-model="data"
      :autofit="true"
      :options="options"
      :parse-formula="parseFormula"
    />
  </div>
</template>

<script setup lang="ts">
import Spreadsheet from "x-data-spreadsheet";
import "x-data-spreadsheet/dist/xspreadsheet.css";

const data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2019", 10, 11, 12, 13],
  ["2020", 20, 11, 14, 13],
  ["2021", 30, 15, 12, 13],
];

const options = {
  mode: "edit",
  showToolbar: true,
};

const parseFormula = (formula: string) => {
  // 自定义公式解析器
  return formula;
};

</script>

在上面的示例中，我们首先引入了 `x-data-spreadsheet` 组件和其样式文件。然后定义了 `data`、`options` 和 `parseFormula` 三个变量，并将它们作为组件的 props 进行传递。其中，`data` 表示表格的数据，`options` 表示表格的配置选项，`parseFormula` 表示自定义的公式解析器。

在模板中，我们将 `x-data-spreadsheet` 组件作为根元素，并将 `data`、`options` 和 `parseFormula` 作为其 props 进行传递。这里我们使用了 `v-model` 指令将表格的数据绑定到了 `data` 变量上。

最后，我们需要在 `script setup` 中引入 `x-data-spreadsheet` 组件并进行相关配置。需要注意的是，`x-data-spreadsheet` 组件是基于 Web Components 技术实现的，因此在使用之前需要先引入其相关的 JavaScript 文件。