Vue3+Vite环境下Vuetify v-data-table表头及数据不显示问题

核心问题原因 #

从Vue2+Vuetify2迁移到Vue3+Vuetify3时，v-data-table的API有多处变更，包括表头字段名、布局组件、插槽语法、排序属性等，这些是导致静态表头无法显示的主要原因。

具体修复步骤 #

1. 替换废弃的布局组件 #

Vuetify3移除了v-layout和v-flex，改用v-row和v-col：

<!-- 原代码 -->
<v-layout>
  <v-flex md lg>
    ...
  </v-flex>
</v-layout>

<!-- 修改后 -->
<v-row>
  <v-col md="12" lg="12">
    ...
  </v-col>
</v-row>

2. 更新表头配置字段（关键修复） #

Vuetify3的表头对象使用title（显示文本）和key（对应数据字段），取代Vue2的text和value：

// 原代码
asksHeaders: [
  { text: "Price (rel)", align: "left", sortable: true, value: "price" },
  { text: "Amount (base)", align: "left", value: "maxvolume" },
  { text: "Total (rel))", align: "right", value: "relamount" }
]

// 修改后
asksHeaders: [
  { title: "Price (rel)", align: "left", sortable: true, key: "price" },
  { title: "Amount (base)", align: "left", key: "maxvolume" },
  { title: "Total (rel)", align: "right", key: "relamount" }
]

注：顺手修正了第三个表头文本的多余右括号

3. 调整排序属性用法 #

Vuetify3中单个排序字段不需要数组格式，直接传入字符串和布尔值：

<!-- 原代码 -->
:sort-by="['price']"
:sort-desc="[true]"

<!-- 修改后 -->
:sort-by="'price'"
:sort-desc="true"

多字段排序需改用:sort="[{ key: 'price', order: 'desc' }]"格式。

4. 适配插槽语法 #

Vuetify3的插槽命名规则微调，保持语法一致性：

<!-- 表头插槽修改 -->
<template #header.price="{ header }">
  Price ({{ wallets.rel.ticker }})
</template>

<template #header.maxvolume="{ header }">
  Amount ({{ wallets.base.ticker }})
</template>

<template #header.relamount="{ header }">
  Total ({{ wallets.rel.ticker }})
</template>

<!-- 单元格插槽修改 -->
<template #item.price="{ item }"> 
  {{ Number(Math.round(item.price+'e8')+'e-8') }}
</template>

<template #item.maxvolume="{ item }">
  {{ Number(Math.round(item.maxvolume+'e8')+'e-8') }}
</template>

<template #item.relamount="{ item }">
  {{ Number(Math.round(item.price*item.maxvolume+'e8')+'e-8') }}
</template>

5. 更新分页禁用属性 #

Vuetify3用pagination对象替代disable-pagination属性：

<!-- 原代码 -->
disable-pagination

<!-- 修改后 -->
:pagination="{ disabled: true }"

hide-default-footer属性可保留使用。

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