vue实现网格填入

Vue 网格填入实现方法

使用 v-for 动态渲染网格

通过 Vue 的 v-for 指令可以快速生成网格结构，结合计算属性动态控制填入内容：

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in gridItems" 
      :key="index" 
      class="grid-item"
      @click="fillGrid(index)"
    >
      {{ item.value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridItems: Array(9).fill().map((_, i) => ({ id: i, value: '' }))
    }
  },
  methods: {
    fillGrid(index) {
      this.gridItems[index].value = 'X' // 可替换为实际填入逻辑
    }
  }
}
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
}
.grid-item {
  border: 1px solid #ddd;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

双向绑定实现表单填入

对于需要用户输入的网格，可以使用 v-model 实现双向绑定：

<template>
  <div class="input-grid">
    <div v-for="row in 5" :key="row" class="row">
      <input 
        v-for="col in 5" 
        :key="col"
        v-model="gridData[row-1][col-1]"
        class="cell"
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: Array(5).fill().map(() => Array(5).fill(''))
    }
  }
}
</script>

拖拽填入功能实现

结合 HTML5 拖放 API 实现更复杂的交互：

methods: {
  handleDragStart(e, item) {
    e.dataTransfer.setData('text/plain', item.id)
  },
  handleDrop(e, cellIndex) {
    const itemId = e.dataTransfer.getData('text/plain')
    this.gridItems[cellIndex].value = this.items.find(i => i.id === itemId).content
  },
  allowDrop(e) {
    e.preventDefault()
  }
}

使用第三方库

对于复杂场景，可以考虑以下库：

• Vue Draggable：实现可排序拖拽网格
• Vue Grid Layout：专业级响应式网格布局
• Vuetify Data Grid：提供完整的数据表格功能

性能优化建议

1. 大数据量时使用虚拟滚动（vue-virtual-scroller）
2. 复杂计算使用计算属性缓存结果
3. 频繁更新的操作使用 requestAnimationFrame
4. 避免在模板中使用复杂表达式

响应式设计要点

通过 CSS Grid 的响应式特性适配不同屏幕：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}