vue3通过点击按钮调用接口获取数据形成表格

在Vue3中，你可以使用`axios`等HTTP请求库来调用接口获取数据，然后结合`v-model`、`v-for`指令以及事件处理函数来动态生成表格。这里是一个简单的示例：

首先，你需要安装axios依赖：

npm install axios

然后，在组件文件（例如`YourComponent.vue`）中，创建data部分并初始化状态：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <table>
      <thead>
        <tr>
          <!-- 表头列 -->
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-for="(value, key) in item" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      headers: [], // 初始化表头数组
      data: [], // 初始化数据数组
    };
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('your-api-url'); // 替换为实际的API地址
        this.headers = response.data.headers; // 获取响应的表头
        this.data = response.data.data; // 获取响应的数据
      } catch (error) {
        console.error('获取数据失败', error);
      }
    },
  },
};
</script>

在这个例子中，当你点击“获取数据”按钮时，会触发`getData`方法，发送GET请求到指定的API。成功获取数据后，将表头和数据赋值给对应的变量，`v-for`循环渲染表格。