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

可以使用以下步骤在 Vue 中使用 x-data-spreadsheet：

1. 安装 x-data-spreadsheet：

   npm install x-data-spreadsheet

2. 在 Vue 组件中引入 x-data-spreadsheet：

   <template>
     <div>
       <div ref="spreadsheet" />
     </div>
   </template>
   
   <script setup lang="ts">
   import Spreadsheet from 'x-data-spreadsheet'
   import 'x-data-spreadsheet/dist/xspreadsheet.css'
   
   const data = [
     ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
     ['2017', 10, 11, 12, 13],
     ['2018', 20, 11, 14, 13],
     ['2019', 30, 15, 12, 13],
   ]
   
   const options = {
     data,
     showToolbar: true,
     view: {
       height: () => document.documentElement.clientHeight - 100,
     },
   }
   
   onMounted(() => {
     const spreadsheet = new Spreadsheet(document.querySelector('#spreadsheet'), options)
   })
   </script>

3. 在 `mounted` 钩子函数中创建 x-data-spreadsheet 实例，并将其挂载到 DOM 节点上：

   onMounted(() => {
     const spreadsheet = new Spreadsheet(document.querySelector('#spreadsheet'), options)
   })

4. 在 CSS 中引入 x-data-spreadsheet 提供的样式：

   import 'x-data-spreadsheet/dist/xspreadsheet.css'

这样就可以在 Vue 中使用 x-data-spreadsheet 了。