vue实现网格填入

Vue 实现网格填入的方法

使用 Vue 实现网格填入功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 动态生成网格

通过 Vue 的 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(rowIndex, colIndex) {
      this.grid[rowIndex][colIndex] = '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>

使用第三方库（如 Vuetify）

如果需要更复杂的网格功能（如拖拽、排序），可以使用 UI 库如 Vuetify 的 v-data-table 或 v-grid 组件。

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="gridData"
      hide-default-footer
    >
      <template v-slot:item.value="{ item }">
        <v-text-field v-model="item.value"></v-text-field>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Column 1', value: 'col1' },
        { text: 'Column 2', value: 'col2' }
      ],
      gridData: [
        { col1: '', col2: '' },
        { col1: '', col2: '' }
      ]
    };
  }
};
</script>

实现可编辑网格

通过结合 v-model 和动态表单，可以实现可编辑的网格填入功能。

<template>
  <table class="editable-grid">
    <tr v-for="(row, rowIndex) in grid" :key="rowIndex">
      <td v-for="(cell, colIndex) in row" :key="colIndex">
        <input v-model="grid[rowIndex][colIndex]" type="text">
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      grid: [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ]
    };
  }
};
</script>

<style>
.editable-grid {
  border-collapse: collapse;
}
.editable-grid td {
  border: 1px solid #ddd;
  padding: 8px;
}
.editable-grid input {
  width: 100%;
  border: none;
  outline: none;
}
</style>

使用 Vue Draggable 实现拖拽网格

如果需要拖拽功能，可以结合 vue-draggable 库实现动态网格填入。

<template>
  <draggable 
    v-model="grid" 
    tag="div" 
    class="drag-grid"
    @end="onDragEnd"
  >
    <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="drag-row">
      <draggable 
        v-model="grid[rowIndex]" 
        tag="div" 
        class="drag-row-inner"
      >
        <div v-for="(cell, colIndex) in row" :key="colIndex" class="drag-cell">
          {{ cell }}
        </div>
      </draggable>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      grid: [
        ['A1', 'A2', 'A3'],
        ['B1', 'B2', 'B3'],
        ['C1', 'C2', 'C3']
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('Grid updated:', this.grid);
    }
  }
};
</script>

<style>
.drag-grid {
  display: flex;
  flex-direction: column;
}
.drag-row {
  display: flex;
  margin: 5px 0;
}
.drag-row-inner {
  display: flex;
}
.drag-cell {
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
</style>

以上方法可以根据实际需求选择或组合使用，实现灵活的网格填入功能。