<script setup lang="ts"></script> vxe-table 在单个组件内使用

如果你正在使用 `<script setup lang="ts"></script>` 语法来编写 Vue 组件，并且想在单个组件内使用 VXE-Table，你可以按照以下步骤进行操作：

首先，确保你已经安装了 VXE-Table 并导入了相关的组件和样式。在你的组件文件中，引入 `vxe-table` 和 `vxe-table-column` 组件：

<script setup lang="ts">
import { VXETable, Table, Column } from 'vxe-table'
import 'vxe-table/lib/style.css'

// 注册 Table 和 Column 组件
VXETable.use(Table)
VXETable.use(Column)
</script>

接下来，在模板中使用 `vxe-table` 和 `vxe-table-column` 组件来构建表格：

<template>
  <div>
    <table>
      <vxe-table :data="tableData">
        <vxe-table-column type="selection" width="60"></vxe-table-column>
        <vxe-table-column field="name" title="姓名"></vxe-table-column>
        <vxe-table-column field="age" title="年龄"></vxe-table-column>
      </vxe-table>
    </table>
  </div>
</template>

在上述代码中，我们使用了 `table` 元素来包裹 VXE-Table 组件，然后在其中使用 `vxe-table` 组件创建表格，并使用 `vxe-table-column` 组件定义表格的列。`:data` 属性绑定了 `tableData` 数据，`:field` 属性指定了每列的数据字段，`:title` 属性指定了每列的标题。

最后，在组件的 `data` 中定义 `tableData` 数据，以供表格使用：

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  // 其他数据...
])
</script>

确保你已经安装了 VXE-Table，并按照上述步骤进行了配置。希望这可以帮助到你！如果还有其他问题，请随时提问。