当前位置：首页 > VUE

vue实现gridlayout显示

2026-02-17 02:12:34VUE

Vue 实现 Grid Layout 显示

使用 `vue-grid-layout` 库

vue-grid-layout 是一个基于 Vue 的拖拽网格布局库，支持响应式设计和动态调整布局。

安装依赖：

npm install vue-grid-layout --save

基本用法：

<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    :use-css-transforms="true"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";

export default {
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
      ],
    };
  },
};
</script>

使用 CSS Grid 布局

如果不需要拖拽功能，可以使用原生 CSS Grid 布局实现简单的网格排列。

示例代码：

<template>
  <div class="grid-container">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
    };
  },
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

使用 `bootstrap-vue` 的网格系统

bootstrap-vue 提供了基于 Bootstrap 的网格系统，适合快速构建响应式布局。

安装依赖：

npm install bootstrap-vue bootstrap

示例代码：

<template>
  <b-container>
    <b-row>
      <b-col v-for="(item, index) in items" :key="index" cols="12" md="4">
        {{ item }}
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
    };
  },
};
</script>

使用 `vuetify` 的网格系统

vuetify 提供了基于 Flexbox 的网格系统，适合 Material Design 风格的布局。

安装依赖：

npm install vuetify

示例代码：

<template>
  <v-container>
    <v-row>
      <v-col v-for="(item, index) in items" :key="index" cols="12" md="4">
        <v-card>
          <v-card-text>{{ item }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
    };
  },
};
</script>