Vue+TypeScript项目中v-data-table无法显示headers和items求助

我用TypeScript构建Vue项目时，Schedule.vue中的v-data-table组件无法正常显示，当前显示效果如下：

我已经通过谷歌搜索了各种解决方案，但都没有效果，现在考虑从零重建项目。以下是我的相关文件代码：

Schedule.vue文件 #

<template>
  <div>
    <v-container>
      <v-row>
        <v-col>
          <v-data-table :headers="daoHeaders" :items="daoItems" :items-per-page="5" class="elevation-1">
            <v-toolbar-title>{{ dsTitle }}</v-toolbar-title>
          </v-data-table>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          This is below the table
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      daoHeaders: [
        { title: 'Sport', key: 'sportName', align: 'start', sortable: true },
        { title: 'League', key: 'leagueName' },
        { title: 'Grade Level', key: 'gradeLevel' }
      ],
      daoItems: [
        { sportName: 'Basketball', leagueName: 'Spring Basketball League', gradeLevel: '6-12' }
      ],
      dsTitle: 'This is my Title'
    }
  },
  methods: {
  }
});
</script>

plugins/index.ts文件 #

/**
 * plugins/index.ts
 *
 * Automatically included in `./src/main.ts`
 */

// Plugins
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import router from '../router'

// Types
import type { App } from 'vue'

export function registerPlugins (app: App) {
  loadFonts()
  app
    .use(vuetify)
    .use(router)
}

main.ts文件 #

/**
 * main.ts
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

tsconfig.json文件 #

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": [
       "src/*"
      ]
     }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

问题排查与解决方案 #

1. 修正v-data-table插槽使用方式
   你直接在v-data-table标签内部放置v-toolbar-title的写法错误，Vuetify组件需要通过指定插槽来插入自定义内容。如果要添加标题，有两种方式：

• 方式一：将标题放在表格外部

<v-col>
  <v-toolbar-title>{{ dsTitle }}</v-toolbar-title>
  <v-data-table :headers="daoHeaders" :items="daoItems" :items-per-page="5" class="elevation-1"></v-data-table>
</v-col>

• 方式二：使用表格的header插槽

<v-data-table :headers="daoHeaders" :items="daoItems" :items-per-page="5" class="elevation-1">
  <template #header>
    <v-toolbar-title>{{ dsTitle }}</v-toolbar-title>
  </template>
</v-data-table>

2. 验证Vuetify配置完整性
   检查plugins/vuetify.ts文件是否存在且配置正确，示例配置如下：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
  // 可添加自定义主题等配置
})

若该文件缺失或配置错误，会导致Vuetify组件无法正常加载样式和功能。

3. 更新依赖并清除缓存
   执行以下命令更新依赖并清除项目缓存，避免版本兼容问题：

rm -rf node_modules package-lock.json
npm install
npm run dev

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