vue axios查到的数据怎么显示在table

在Vue中使用Axios获取数据并显示在table中，需要进行以下几步操作：

1. 在Vue组件中引入Axios并设置请求地址：

import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    axios.get('http://example.com/api/items')
      .then(response => {
        this.items = response.data
      })
  }
}

2. 在Vue组件的template里编写table结构并使用v-for指令遍历data数组，将获取到的数据填充到表格单元格中：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

3. 在表格中使用v-if指令判断是否有数据并显示loading状态，当数据获取完毕后隐藏loading状态：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="items.length === 0">
          <td colspan="3">数据加载中...</td>
        </tr>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    axios.get('http://example.com/api/items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>