vue实现网格填入

Vue 实现网格填入的方法

使用 v-for 动态生成网格

通过 Vue 的 v-for 指令可以轻松实现网格布局。创建一个二维数组作为数据源，用嵌套的 v-for 循环渲染行列。

<template>
  <div class="grid-container">
    <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid-row">
      <div 
        v-for="(cell, colIndex) in row" 
        :key="colIndex" 
        class="grid-cell"
        @click="handleCellClick(rowIndex, colIndex)"
      >
        {{ cell }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grid: [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ]
    }
  },
  methods: {
    handleCellClick(row, col) {
      this.grid[row][col] = 'X' // 示例：点击填入X
    }
  }
}
</script>

<style>
.grid-container {
  display: flex;
  flex-direction: column;
}
.grid-row {
  display: flex;
}
.grid-cell {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>

使用第三方表格组件

对于复杂网格需求，可以集成专业表格库如 ag-grid-vue 或 vue-table：

npm install ag-grid-vue ag-grid-community

<template>
  <ag-grid-vue
    style="width: 500px; height: 300px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    @cell-clicked="onCellClick"
  >
  </ag-grid-vue>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";

export default {
  components: { AgGridVue },
  data() {
    return {
      columnDefs: [
        { headerName: "A", field: "a" },
        { headerName: "B", field: "b" }
      ],
      rowData: [
        { a: "", b: "" },
        { a: "", b: "" }
      ]
    }
  },
  methods: {
    onCellClick(event) {
      event.data[event.colDef.field] = "New Value"
    }
  }
}
</script>

响应式网格数据绑定

通过 Vue 的响应式特性实现双向绑定：

<template>
  <div class="grid">
    <div v-for="(row, i) in grid" :key="i" class="row">
      <input 
        v-for="(val, j) in row" 
        :key="j"
        v-model="grid[i][j]"
        type="text"
        class="cell"
      >
    </div>
  </div>
</template>

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

动态调整网格尺寸

实现可配置的网格尺寸：

<template>
  <div>
    <input v-model="rows" type="number" min="1">
    <input v-model="cols" type="number" min="1">
    <button @click="initGrid">生成网格</button>

    <div class="grid">
      <!-- 动态网格内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: 3,
      cols: 3,
      grid: []
    }
  },
  methods: {
    initGrid() {
      this.grid = Array(this.rows).fill()
        .map(() => Array(this.cols).fill(''))
    }
  },
  created() {
    this.initGrid()
  }
}
</script>

网格验证与提交

添加数据验证和提交功能：

methods: {
  validateGrid() {
    return this.grid.every(row => 
      row.every(cell => cell.trim() !== '')
    )
  },
  submitGrid() {
    if (!this.validateGrid()) {
      alert('请填写所有格子')
      return
    }
    console.log('提交数据:', this.grid)
  }
}