vue3 表格展示后台数据

Vue3 中，表格展示后台数据通常会涉及到组件化开发以及数据绑定的概念。首先，你需要设置一个 Vue 组件，比如 `TableComponent`，并使用 `v-model` 或者 `ref` 来管理从 API 获取的数据。这里是一个简单的示例：

<template>
  <div>
    <table ref="table">
      <thead>
        <tr>
          <th v-for="(column, index) in columns" :key="index">{{ column.header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in data" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import axios from 'axios';

const columns = [
  { header: '姓名', prop: 'name' },
  // ... 其他列定义
];

const fetchData = async () => {
  const response = await axios.get('/api/data');
  setData(response.data);
};

// 引入 setup 风格的 state 管理
const { data } = reactive({});

onMounted(fetchData);

function setData(newData) {
  data = newData;
}
</script>

在这个例子中，`columns` 定义了表头，`data` 存储从后端获取的表格数据。当你首次渲染页面时，`fetchData` 函数会被调用，然后将返回的数据赋值给 `data`。`v-for`指令用于遍历每一行和每一列，显示数据。