x-data-spreadsheet Vue3 setup lang="ts" 示例

以下是在 Vue3 中使用 x-data-spreadsheet 的示例代码，使用 TypeScript：

<template>
  <div>
    <x-data-spreadsheet
      ref="spreadsheetRef"
      :options="options"
      v-model="data"
    />
    <button @click="getData">获取数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Spreadsheet from 'x-data-spreadsheet'

export default defineComponent({
  name: 'MySpreadsheet',
  components: {
    'x-data-spreadsheet': Spreadsheet,
  },
  setup() {
    const spreadsheetRef = ref(null)
    const options = {
      mode: 'edit',
      view: {
        height: () => document.documentElement.clientHeight - 100,
        width: () => document.documentElement.clientWidth - 32,
      },
    }
    const data = ref([
      ['姓名', '性别', '年龄', '邮箱'],
      ['张三', '男', 18, 'zhangsan@example.com'],
      ['李四', '女', 22, 'lisi@example.com'],
    ])

    const getData = () => {
      console.log(spreadsheetRef.value.getData())
    }

    return { spreadsheetRef, options, data, getData }
  },
})
</script>

在这个示例中，我们使用了 `ref` 创建了一个对 spreadsheet 的引用，并将其传递给 `x-data-spreadsheet` 组件。我们还定义了 `options` 对象来设置 spreadsheet 的选项，例如打开编辑模式并设置视图的高度和宽度。

我们使用 `ref` 创建了一个对数据的引用，它被双向绑定到 `x-data-spreadsheet` 组件的 `v-model`。我们还定义了一个 `getData` 函数，用于在控制台中输出电子表格的数据。

最后，我们使用 `setup` 函数来导出所有这些变量和函数，使它们对模板可见。