Vue3 + Vuetify基础布局异常问题求助

问题核心 #

你的布局挤压问题主要来自三个错误：

• 没有用<v-app>作为根容器，Vuetify的应用组件（v-app-bar、v-navigation-drawer、v-main）需要在<v-app>下才能正确协同布局
• <v-container>默认有最大宽度限制，没加fluid属性无法占满父容器宽度
• <v-card>上的cols="12"无效，网格列属性必须配合<v-row>和<v-col>使用

修改后的App组件代码 #

<template>
  <!-- 必须用v-app作为根容器 -->
  <v-app>
    <!-- App Bar -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-title>Dashboard</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-account-circle</v-icon>
      </v-btn>
    </v-app-bar> 

    <!-- Navigation Drawer -->
    <v-navigation-drawer app permanent color="primary" dark>
      <v-list dense>
        <v-list-item-group>
          <v-list-item :to="{ name: 'dashboard' }" link>
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <!-- Main Content -->
    <v-main app>
      <!-- 添加fluid属性让容器占满宽度，px-8实现32px内边距（Vuetify spacing单位为4px） -->
      <v-container fluid class="px-8">
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts"></script>

修改后的Dashboard组件代码 #

<template>
  <!-- 用v-row和v-col实现网格布局，v-col的cols="12"确保占满整行 -->
  <v-row>
    <v-col cols="12">
      <v-card>
        <v-card-text>
          <v-tabs v-model="tab" bg-color="primary">
            <v-tab value="one">One</v-tab>
          </v-tabs>

          <v-card-text class="pa-0">
            <v-tabs-window v-model="tab">
              <v-tabs-window-item value="one">
                <!-- 去掉多余的v-list嵌套 -->
                <v-table>
                  <thead>
                    <tr>
                      <th v-for="header in equipmentColumnHeaders" :key="header" class="text-left">{{ header }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="request in equipmentRequests" :key="request.ID">
                      <td>{{ request.ID }}</td>
                      <td>{{ request.requestedItem }}</td>
                      <td>{{ request.status }}</td>
                      <td>{{ request.requestDate }}</td>
                    </tr>
                  </tbody>
                </v-table>
              </v-tabs-window-item>
            </v-tabs-window>
          </v-card-text>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const tab = ref('one')
const equipmentColumnHeaders = ['ID', 'Requested Item', 'Status', 'Request Date']
const equipmentRequests = reactive([
  { ID: 1, requestedItem: 'Laptop', status: 'Pending', requestDate: '2024-09-01' },
  { ID: 2, requestedItem: 'Projector', status: 'Approved', requestDate: '2024-08-15' },
  { ID: 3, requestedItem: 'Whiteboard', status: 'In Progress', requestDate: '2024-08-20' }
])
</script>

关键修改说明 #

• 根容器必须是<v-app>：Vuetify布局组件依赖v-app提供的全局上下文，没有它的话，带app属性的组件无法正确计算可用空间
• v-container添加fluid：默认v-container有固定最大宽度，fluid属性会让它占满父元素100%宽度
• 网格系统正确用法：cols="12"必须放在<v-col>上，配合<v-row>才能实现整行占满的效果，直接加在卡片上无效
• 清理多余嵌套：Dashboard中的<v-list>是冗余嵌套，会干扰布局，直接移除即可
• 规范内边距设置：用Vuetify内置的spacing类px-8实现32px左右内边距，符合框架设计规范

原布局效果 #

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