当前位置：首页 > VUE

vue实现选中单元格

2026-03-06 19:53:32VUE

实现选中单元格的基本思路

在Vue中实现选中单元格功能通常需要结合表格渲染和事件监听。通过v-for动态生成表格，利用v-on或@语法监听点击事件，并通过数据绑定动态更新选中状态。

核心代码示例

模板部分（Table.vue）

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td 
        v-for="(cell, colIndex) in row" 
        :key="colIndex"
        @click="selectCell(rowIndex, colIndex)"
        :class="{ 'selected': isSelected(rowIndex, colIndex) }"
      >
        {{ cell }}
      </td>
    </tr>
  </table>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      tableData: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3']
      ],
      selectedCell: { row: null, col: null }
    }
  },
  methods: {
    selectCell(row, col) {
      this.selectedCell = { row, col };
    },
    isSelected(row, col) {
      return this.selectedCell.row === row && 
             this.selectedCell.col === col;
    }
  }
}
</script>

样式增强

添加CSS突出显示选中单元格：

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

高级功能实现

多选支持 修改数据结构和方法：

data() {
  return {
    selectedCells: new Set() // 使用Set存储选中坐标
  }
},
methods: {
  selectCell(row, col) {
    const key = `${row}-${col}`;
    if (this.selectedCells.has(key)) {
      this.selectedCells.delete(key);
    } else {
      this.selectedCells.add(key);
    }
  },
  isSelected(row, col) {
    return this.selectedCells.has(`${row}-${col}`);
  }
}

键盘导航支持 监听键盘事件增强交互：

vue实现选中单元格

mounted() {
  window.addEventListener('keydown', this.handleKeyPress);
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyPress);
},
methods: {
  handleKeyPress(e) {
    if (!this.selectedCell.row) return;

    const { row, col } = this.selectedCell;
    switch(e.key) {
      case 'ArrowUp': 
        if (row > 0) this.selectCell(row-1, col);
        break;
      case 'ArrowDown':
        if (row < this.tableData.length-1) this.selectCell(row+1, col);
        break;
      // 类似处理其他方向键...
    }
  }
}