当前位置：首页 > VUE

vue.js 实现grid

2026-02-23 00:31:08VUE

在 Vue.js 中实现网格（Grid）布局可以通过多种方式完成，包括使用 CSS Grid、Flexbox 或第三方组件库。以下是几种常见方法：

使用 CSS Grid 实现基础网格

通过 Vue 模板结合 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: 16px;
  padding: 16px;
}
.grid-item {
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

使用 Flexbox 实现网格

Flexbox 是另一种灵活的布局方案，适合简单网格需求：

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

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.flex-item {
  flex: 1 0 calc(33.333% - 16px);
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

使用第三方组件库

对于更复杂的网格需求（如排序、分页、过滤），可以使用专门的数据网格组件：

Vuetify 的 v-data-table:


<template>
<v-data-table
 :headers="headers"
 :items="items"
 :items-per-page="5"
 class="elevation-1"
></v-data-table>
</template>

export default { data() { return { headers: [ { text: 'Name', value: 'name' }, { text: 'Age', value: 'age' } ], items: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ] } } } ```

PrimeVue 的 DataTable:


<template>
<DataTable :value="products">
 <Column field="code" header="Code"></Column>
 <Column field="name" header="Name"></Column>
</DataTable>
</template>

import DataTable from 'primevue/datatable'; import Column from 'primevue/column';

export default { components: { DataTable, Column }, data() { return { products: [ { code: 'P1', name: 'Product 1' }, { code: 'P2', name: 'Product 2' } ] } } }

```

动态响应式网格

通过计算属性实现响应式列数变化：

<template>
  <div class="grid-container" :style="{ 'grid-template-columns': `repeat(${columns}, 1fr)` }">
    <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'],
      screenWidth: window.innerWidth
    }
  },
  computed: {
    columns() {
      return this.screenWidth < 600 ? 2 : 3;
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.screenWidth = window.innerWidth;
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize');
  }
}
</script>

拖拽排序网格

使用 vuedraggable 实现可拖拽网格：

vue.js 实现grid

<template>
  <draggable v-model="items" class="grid-container" item-key="id">
    <template #item="{ element }">
      <div class="grid-item">{{ element.text }}</div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    }
  }
}
</script>

以上方法可根据项目需求选择，从简单静态布局到复杂交互式数据网格均可覆盖。