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

在 Vue 的 `<script setup>` 语法中，可以使用 `defineProps` 来定义组件的属性，然后使用 `const` 或 `let` 来定义变量和函数。在使用 `x-data-spreadsheet` 时，需要先安装依赖：

npm install x-data-spreadsheet --save

然后在组件中引入该库：

import Spreadsheet from "x-data-spreadsheet";

接着，可以使用 `defineProps` 定义组件的属性，例如：

import { defineProps } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => [[]]
  },
  // 其他属性...
})

然后在 `setup` 函数中，可以创建一个 `Spreadsheet` 实例，并将属性传递给它：

import { ref, onMounted } from 'vue';
import Spreadsheet from "x-data-spreadsheet";

export default {
  setup(props) {
    const spreadsheetEl = ref(null);

    onMounted(() => {
      const instance = new Spreadsheet(spreadsheetEl.value, {
        data: props.data,
        // 其他属性...
      });
    });

    return {
      spreadsheetEl
    };
  }
}

最后，在组件的模板中，可以使用 `ref` 来获取 DOM 元素，并将其传递给 `setup` 函数中的 `spreadsheetEl` 变量：

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