vue3 ts vite 获取列表数据渲染到表格 举例

好的，我可以给你提供一个简单的示例。

首先，你需要在项目中安装 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 的文件，用于渲染表格。示例代码如下：

<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 的文件，用于模拟请求数据。示例代码如下：

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 的文件，用于渲染页面。示例代码如下：

<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 的获取列表数据渲染到表格的示例。