vue ajax 表格,vue使用ajax调用接口：示例代码

Vue中使用Ajax调用接口可以实现动态加载数据并展示在表格中。我们需要在Vue组件中引入Ajax库，比如axios，来发送异步请求获取数据。然后，在Vue的生命周期钩子函数中，比如created，使用Ajax发送请求，并将返回的数据保存到组件的数据属性中。在模板中使用v-for指令遍历数据，并将数据展示在表格中。

以下是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

在上面的代码中，我们首先在模板中定义了一个表格，包含了表头和表体。然后，在组件的data属性中定义了一个数组users，用于保存从接口返回的用户数据。

在created生命周期钩子函数中，我们使用axios发送了一个GET请求，请求地址为'/api/users'。当请求成功后，通过response.data获取到返回的用户数据，并将其赋值给users数组。如果请求出错，我们通过catch捕获错误并在控制台打印错误信息。

在模板中使用v-for指令遍历users数组，并将每个用户的id、name和email展示在表格中的每一行中。

这样，当组件被创建时，会自动发送请求获取数据，并将数据展示在表格中。