Vuetify 3.4的V-Data-Table是否异常？响应式视图无法渲染

在Vuetify 2中，v-data-table会在移动端视图下自动切换为垂直卡片式布局，但这个功能在Vuetify 3中已被官方废弃，并非未开发或存在bug。Vuetify 3重构时更侧重组件的可定制性，移除了这种固定的自动转换行为，让开发者能根据项目需求自定义移动端展示样式。

以下是两种实现类似效果的替代方案：

1. 利用 mobile-breakpoint 与自定义插槽 #

通过mobile-breakpoint指定触发移动端布局的断点，结合item插槽区分移动端和桌面端的渲染逻辑：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    :mobile-breakpoint="600"
    class="elevation-1"
  >
    <template v-slot:item="{ item, isMobile }">
      <!-- 桌面端保留表格布局 -->
      <tr v-if="!isMobile">
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
        <td>{{ item.fat }}</td>
        <td>{{ item.carbs }}</td>
        <td>{{ item.protein }}</td>
      </tr>
      <!-- 移动端渲染为垂直卡片 -->
      <v-card v-else class="mb-3">
        <v-card-text>
          <div class="text-subtitle-1 font-weight-bold">{{ item.name }}</div>
          <div class="mt-1">热量: {{ item.calories }} kcal</div>
          <div>脂肪: {{ item.fat }} g</div>
          <div>碳水: {{ item.carbs }} g</div>
          <div>蛋白质: {{ item.protein }} g</div>
        </v-card-text>
      </v-card>
    </template>
  </v-data-table>
</template>

<script setup>
const headers = [
  { text: '名称', value: 'name' },
  { text: '热量', value: 'calories' },
  { text: '脂肪', value: 'fat' },
  { text: '碳水', value: 'carbs' },
  { text: '蛋白质', value: 'protein' },
]

const desserts = [
  { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
  // 可补充更多数据项
]
</script>

2. 基于断点切换组件 #

借助Vuetify的断点工具，在不同屏幕尺寸下分别渲染表格和卡片列表，实现完全独立的布局控制：

<template>
  <v-container>
    <!-- 桌面及平板端显示数据表格 -->
    <v-data-table
      v-show="$vuetify.display.mdAndUp"
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>

    <!-- 移动端显示垂直卡片列表 -->
    <v-list v-show="$vuetify.display.smAndDown">
      <v-card v-for="item in desserts" :key="item.name" class="mb-3">
        <v-card-text>
          <div class="text-subtitle-1 font-weight-bold">{{ item.name }}</div>
          <div class="mt-1">热量: {{ item.calories }} kcal</div>
          <div>脂肪: {{ item.fat }} g</div>
          <div>碳水: {{ item.carbs }} g</div>
          <div>蛋白质: {{ item.protein }} g</div>
        </v-card-text>
      </v-card>
    </v-list>
  </v-container>
</template>

<script setup>
// headers和desserts定义与上例一致
</script>

这种方案的优势是可以为移动端和桌面端设计完全不同的交互逻辑，适配性更强。

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