vue3 传id 返回表格数据

在Vue3中，如果你想要通过ID从服务器获取表格数据并显示在组件中，通常会涉及以下步骤：

1. **数据获取**：你可以使用`axios`, `fetch`或者其他HTTP库来发送GET请求到API端点，传递ID作为查询参数。例如：

import axios from 'axios';

export const fetchDataById = async (id) => {
  try {
    const response = await axios.get(`/api/table-data?id=${id}`);
    return response.data; // 假设返回的数据包含表格数据
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

2. **响应式计算属性**：在你的Vue组件中，可以创建一个响应式计算属性，当ID改变时，它会触发数据获取：

<template>
  <table>
    <!-- 表格内容 -->
  </table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { fetchDataById } from './api'; // 假设这是导入函数

const id = ref(<your-id初始值>);
const tableData = computed(async () => {
  const fetchedData = await fetchDataById(id.value);
  return fetchedData;
});

onMounted(() => {
  // 初始化表格数据
  tableData.value;
});
</script>

3. **渲染表格**：在模板中，你可以使用`v-for`遍历`tableData`来展示每一行数据。