当前位置：首页 > VUE

vue实现gridlayout显示

2026-03-29 01:08:36VUE

Vue 实现 Grid Layout 显示

使用 CSS Grid 布局

CSS Grid 是一种强大的布局方式，可以直接在 Vue 模板中使用。通过定义 display: 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;
}

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

使用第三方库 Vue Grid Layout

vue-grid-layout 是一个专门为 Vue 设计的拖拽网格布局库，支持动态调整网格项的位置和大小。

安装库：

npm install vue-grid-layout

使用示例：

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
  >
    <grid-item
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
    >
      {{ 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>

使用 Bootstrap Vue 网格系统

Bootstrap Vue 提供了响应式网格系统，适合快速搭建布局。

安装 Bootstrap Vue：

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>

使用 Vue Draggable 实现可拖拽网格

如果需要拖拽功能，可以结合 vue-draggable 实现。

安装库：

npm install vuedraggable

使用示例：

vue实现gridlayout显示

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

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  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;
}

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

以上方法可以根据需求选择，CSS Grid 适合简单布局，vue-grid-layout 适合复杂拖拽布局，Bootstrap Vue 适合快速响应式布局，vue-draggable 适合需要拖拽功能的场景。