Vue3 使用接口数据填充表格：getIndexApi 获取数据并赋值给 data

假设 getIndexApi 返回的数据格式如下：\n\ntypescript\ninterface IndexData {\n id: number;\n name: string;\n age: number;\n // 其他字段...\n}\n\n\n在 Vue3 中，可以使用 setup 函数来调用接口并给表格数据 data 赋值。具体步骤如下：\n\n1. 在组件中引入 ref 和 onMounted 函数：\n\ntypescript\nimport { ref, onMounted } from 'vue';\n\n\n2. 在 setup 函数中定义表格数据 data，并使用 ref 函数将其转化为响应式数据：\n\ntypescript\nsetup() {\n const data = ref<IndexData[]>([]);\n \n // 其他逻辑...\n \n return {\n data\n }\n}\n\n\n3. 在 onMounted 钩子函数中调用接口，并将返回的数据赋值给 data：\n\ntypescript\nsetup() {\n const data = ref<IndexData[]>([]);\n\n onMounted(async () => {\n try {\n const response = await getIndexApi();\n data.value = response.data;\n } catch (error) {\n // 处理错误\n }\n });\n\n // 其他逻辑...\n \n return {\n data\n }\n}\n\n\n在上述代码中， getIndexApi 是一个异步函数，使用 await 关键字等待接口返回的数据，并将其赋值给 data.value。注意，由于 data 是响应式数据，所以需要通过 data.value 来访问其值。\n\n4. 最后，在模板中使用表格来展示 data 的数据：\n\nhtml\n<template>\n <table>\n <thead>\n <!-- 表头 -->\n </thead>\n <tbody>\n <tr v-for="item in data" :key="item.id">\n <td>{{ item.id }}</td>\n <td>{{ item.name }}</td>\n <td>{{ item.age }}</td>\n <!-- 其他字段... -->\n </tr>\n </tbody>\n </table>\n</template>\n\n\n通过 v-for 指令遍历 data 数组，并使用 item.id、item.name 等字段来展示数据。\n\n注意：以上代码仅为示例，实际情况中可能需要根据具体接口和数据结构进行相应的调整。