vue3从后台接口返回数据创建表格

在Vue3中，可以使用`axios`库向后台接口发送请求，并将返回的数据用于渲染表格。以下是一个简单的例子：

1. 安装`axios`

npm install axios --save

2. 在Vue组件中引入`axios`

import axios from 'axios'

3. 在组件的`data`选项中定义表格数据

data() {
  return {
    tableData: []
  }
}

4. 在组件的`mounted`钩子中发送请求并处理返回数据

mounted() {
  axios.get('/api/tableData')
    .then(response => {
      this.tableData = response.data
    })
    .catch(error => {
      console.log(error)
    })
}

5. 在组件的模板中使用`v-for`指令渲染表格

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

在上述代码中，我们通过发送请求获取后台的表格数据，然后使用`v-for`指令将数据渲染到表格中。需要注意的是，我们在`v-for`指令中使用`:key="index"`来指定每个表格行的唯一标识，以提高渲染性能。