Vue2.6.11项目中Vuetify的v-data-table有数据但不展示如何解决

问题排查与解决方案 #

1. 接口调用参数顺序错误（核心问题） #

你定义的listArticle方法接收3个参数：第一个是请求参数param，第二个是成功回调，第三个是失败回调。但你在created钩子中调用时，直接把成功回调作为第一个参数传入，导致参数匹配完全错位：

• 原本的请求参数param拿到的是你的成功回调函数
• 原本的成功回调参数拿到的是你的失败回调函数
• 失败回调参数为undefined
  接口请求成功后实际执行的是你写的错误处理逻辑，根本没有执行给boards赋值的代码，所以表格始终没有数据。

修复方法：调用时第一个参数传空对象作为占位（如果不需要额外传请求参数的话）：

created() {
  listArticle(
    {}, // 补充第一个参数：请求参数，无参数传空对象即可
    (response) => {
      // 这里可以加个日志确认数据结构
      console.log('接口返回数据：', response.data)
      this.boards = response.data
    },
    (error) => {
      console.log(error)
    }
  )
}

2. 确认返回数据结构匹配要求 #

v-data-table的items属性要求传入数组，很多后端接口会把列表数据嵌套在返回体的字段中，比如response.data.list才是实际的文章数组，你可以通过刚才加的console日志确认：

• 如果返回的response.data本身就是文章数组，直接赋值即可
• 如果返回的是包含列表的对象，比如{code: 200, data: [...], msg: 'success'}，那要改成this.boards = response.data.data

3. 插槽使用优化 #

你当前写的v-slot:item是整行自定义插槽，如果你没有特殊的自定义渲染需求，完全可以删掉这部分自定义插槽代码，Vuetify会自动根据headers里配置的value字段读取item的对应属性渲染，省去你手动写取值逻辑的麻烦：

<!-- 删掉下面这段即可 -->
<template v-slot:item="props">
  <td class="text-xs-right">{{ props.item.articleno }}</td>
  <td class="text-xs-right">{{ props.item.data.articleno }}</td>
</template>

如果要自定义某一列的渲染，可以用单列插槽的写法，比如自定义文章编号列：

<template v-slot:item.articleno="{ item }">
  <td class="text-xs-right">{{ item.articleno }}</td>
</template>

4. 快速验证排查 #

可以先给boards写死测试数据，确认表格本身的渲染逻辑没问题：

data() {
  return {
    // ...其他配置
    boards: [
      { articleno: 1, subject: '测试文章1' },
      { articleno: 2, subject: '测试文章2' }
    ]
  }
}

如果写死数据可以正常渲染，就可以确定是接口请求或者数据赋值的问题，再针对性排查即可。

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