Vue.js 如何实现需求的 Grid 视图 解决 Vuetify 网格布局错位问题

解决方案 #

1. 修复内容从中部排列的问题 #

内容从中部开始排列是因为Vuetify的v-layout组件默认垂直对齐方式为居中，只需要给外层的v-layout添加align-start属性，即可让所有列内容从顶部开始对齐。

2. 嵌套网格添加History组件 #

要实现History组件在ActiveCall下方、和Contacts并排的布局，需要嵌套使用Vuetify的网格系统：

• 把原有ActiveCall和Contacts对应的布局外层，包裹一个总宽度为xs12 md9 lg9的v-flex容器
• 在这个容器内部嵌套布局，把ActiveCall和History组件放在垂直排列的布局里，和右侧的Contacts组件同级

修改后完整代码如下：

<template>
  <div>
    <v-container fluid>
      <!-- 增加align-start让内容从顶部对齐，解决中部排列问题 -->
      <v-layout row wrap align-start>
        <!-- 左侧Communication组件，占3列 -->
        <v-flex xs12 md3 lg3 >
          <Communication class="ml-6 mr-6" />
        </v-flex>
        <!-- 右侧总容器，占9列，内部嵌套布局 -->
        <v-flex xs12 md9 lg9>
          <v-layout row wrap align-start>
            <!-- 左侧放ActiveCall和History的容器，占5列 -->
            <v-flex xs12 md5 lg5>
              <v-layout column>
                <ActiveCall class="mr-2 mb-4" />
                <!-- 新增History组件，和ActiveCall垂直排列 -->
                <History class="mr-2" />
              </v-layout>
            </v-flex>
            <!-- 右侧Contacts组件，占4列，和左侧两个组件并排 -->
            <v-flex xs12 md4 lg4>
              <Contacts class="ml-4 mr-6" />
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

可根据实际组件尺寸调整代码中的mb-4等间距类名，适配组件间隔需求。

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