Vuetify + TypeScript 项目v-data-table无法展示API返回数据问题

问题排查与修复方案 #

1. 接口返回结构不匹配（核心原因） #

你Postman返回的是单个User对象，不是User数组，而代码中直接对data.data调用数组方法map会直接抛出类型错误，导致tableItems赋值失败始终为空。
首先确认后端/users接口应该返回数组结构，正确的返回格式参考：

[
  {
    "id": "12345678",
    "name": "User Test",
    "description": "Description Test"
  }
]

如果后端暂时只能返回单个对象，可以调整赋值逻辑手动包裹成数组：

.then((data: AxiosResponse) => {
  // 兼容单个对象/数组两种返回格式
  const userList = Array.isArray(data.data) ? data.data : [data.data]
  const computedArrayOfUsers = userList.map((user: User) => ({
    id: user.id,
    name: user.name,
    description: user.description,
  }));
  this.tableItems = computedArrayOfUsers;
})

2. 缺失loading属性声明 #

代码中使用了this.loading控制加载状态，但在类中没有声明该属性，TS编译会报错，需要补充声明：

export default class PageTable extends Vue {
  private loading = false // 补充这行
  private tableItems: User[] = []
  // 其余原有代码
}

3. 参数类型不匹配 #

你定义的User接口中id是string类型，但editUser方法的入参声明为number，存在类型不兼容问题，修改为：

private editUser(userId: string) {
  this.$router.push({ name: 'PageEdit', params: { id: userId } });
}

4. 拖拽逻辑优化（避免渲染异常+数据不同步） #

1. 不要用index作为v-for的key，拖拽排序时会导致渲染错乱，改为唯一的user.id
2. draggable直接绑定你声明的tableItems，避免拖拽修改后数据和数据源不同步

<draggable
  :list="tableItems"
  tag="tbody"
>
  <tr
    v-for="(user, index) in tableItems"
    :key="user.id"
  >
  <!-- 其余原有代码 -->

5. 表头配置补充（可选优化） #

你自定义的表格行有5列（拖拽图标、ID、名称、描述、编辑按钮），但表头配置只有3列，如果要显示对应表头可以补充配置：

private tableHeaders = [
  { text: '', sortable: false },
  { text: 'ID', value: 'id', sortable: false },
  { text: 'NAME', value: 'name', sortable: false },
  { text: 'DESCRIPTION', value: 'description', sortable: false },
  { text: '操作', sortable: false },
];

内容的提问来源于stack exchange，提问作者johnnyrocket33