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

很高兴为您提供 x-data-spreadsheet 的示例代码。请先确保已经引入了相关依赖：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css" />

<!-- 引入脚本 -->
<script src="https://unpkg.com/x-data-spreadsheet"></script>

然后，您可以按照以下示例代码使用 x-data-spreadsheet：

<template>
  <div>
    <x-spreadsheet :options="options" v-model="data" />
  </div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";

export default {
  components: {
    "x-spreadsheet": Spreadsheet,
  },
  data() {
    return {
      options: {
        mode: "edit",
        view: {
          height: () => document.documentElement.clientHeight - 100,
          width: () => document.documentElement.clientWidth - 10,
        },
      },
      data: [
        {
          name: "Sheet1",
          data: [["Name", "Gender", "Age"], ["Tom", "Male", 18], ["Lucy", "Female", 20]],
        },
      ],
    };
  },
};
</script>

以上代码展示了一个简单的表格，其中包含一个名为 Sheet1 的工作表，包含姓名、性别和年龄列。您可以通过修改 `data` 属性来设置表格数据。