好的，我可以给你提供一个简单的示例。
首先，你需要在项目中安装 Vue 3、TypeScript 和 Vite，可以使用以下命令：
```
npm install vue@next vue-router@next @types/vue @types/vue-router -S
npm install vite -D
```
接着，在 src 目录下创建一个 components 目录，用于存放组件。在 components 目录下创建一个名为 Table.vue 的文件，用于
渲染表格。示例代码如下：
```vue
<template>
<table>
<thead>
<tr>
<th v-for="column in columns" :key="column.field">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td v-for="column in columns" :key="column.field">{{ item[column.field] }}</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
interface Column {
field: string
title: string
}
interface Item {
id: number
name: string
age: number
}
export default defineComponent({
name: 'Table',
props: {
columns: {
type: Array as () => Column[],
required: true,
},
items: {
type: Array as () => Item[],
required: true,
},
},
})
</script>
```
在组件中，我们定义了两个接口，Column 和 Item，分别表示表格的列和
数据项。在 props 中声明了 columns 和 items，用于接收传入的列和
数据。在模板中，使用 v-for
渲染表头和表格内容。
接下来，在 src 目录下创建一个名为 api.ts 的文件，用于模拟请求
数据。示例代码如下：
```ts
interface Response<T> {
code: number
data: T
}
interface User {
id: number
name: string
age: number
}
const userList: User[] = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
]
export function getUserList(): Promise<Response<User[]>> {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ code: 0, data: userList })
}, 1000)
})
}
```
在 api.ts 中，我们定义了一个 getUserList 函数，用于模拟请求
用户列表数据。该函数返回一个 Promise，用于异步
获取数据。
最后，在 src 目录下创建一个名为 App.vue 的文件，用于
渲染页面。示例代码如下：
```vue
<template>
<div>
<Table :columns="columns" :items="items" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { getUserList } from './api'
import Table from './components/Table.vue'
export default defineComponent({
name: 'App',
components: { Table },
setup() {
const columns = [
{ field: 'id', title: 'ID' },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
]
const items = ref([])
onMounted(async () => {
const response = await getUserList()
items.value = response.data
})
return {
columns,
items,
}
},
})
</script>
```
在 App.vue 中，我们引入了 Table 组件，并在模板中使用 props 将列和
数据传递给表格组件。在 setup 中，我们使用 ref 创建了一个 items 变量，用于存储
用户列表数据。在 onMounted 生命周期钩子中，使用 async/await 异步
获取数据，并将
数据赋值给 items 变量。
这样，我们就完成了一个简单的 Vue 3 + TypeScript + Vite 的
获取列表数据渲染到表格的示例。
最低0.47元/天 解锁文章
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
