vue实现选中单元格

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

在Vue中实现选中单元格功能，可以通过数据绑定和事件处理来完成。需要跟踪当前选中的单元格状态，并在用户点击时更新该状态。

使用v-for渲染表格

创建一个表格结构，使用v-for指令循环渲染单元格。为每个单元格绑定点击事件，并通过动态class或style来高亮显示选中的单元格。

<template>
  <table>
    <tr v-for="(row, rowIndex) in grid" :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>

管理选中状态

在data中定义selectedCell对象来存储当前选中的单元格坐标，并提供方法来判断某个单元格是否被选中。

<script>
export default {
  data() {
    return {
      grid: [
        ['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>

添加样式高亮选中单元格

为选中的单元格添加特殊样式，使其在视觉上区别于其他单元格。

<style>
.selected {
  background-color: #4CAF50;
  color: white;
}
</style>

支持多选功能

如果需要支持多选功能，可以将selectedCell改为数组，并修改相关逻辑。

data() {
  return {
    selectedCells: []
  }
},
methods: {
  selectCell(row, col) {
    const index = this.selectedCells.findIndex(cell => 
      cell.row === row && cell.col === col
    )
    if (index === -1) {
      this.selectedCells.push({ row, col })
    } else {
      this.selectedCells.splice(index, 1)
    }
  },
  isSelected(row, col) {
    return this.selectedCells.some(cell => 
      cell.row === row && cell.col === col
    )
  }
}

使用计算属性优化性能

对于大型表格，可以使用计算属性来优化选中状态的判断性能。

computed: {
  selectedCellMap() {
    const map = {}
    this.selectedCells.forEach(cell => {
      map[`${cell.row}-${cell.col}`] = true
    })
    return map
  }
},
methods: {
  isSelected(row, col) {
    return !!this.selectedCellMap[`${row}-${col}`]
  }
}

添加键盘支持

通过监听键盘事件，可以实现使用方向键移动选中单元格的功能。

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

    switch(e.key) {
      case 'ArrowUp':
        if (this.selectedCell.row > 0) {
          this.selectCell(this.selectedCell.row - 1, this.selectedCell.col)
        }
        break
      case 'ArrowDown':
        if (this.selectedCell.row < this.grid.length - 1) {
          this.selectCell(this.selectedCell.row + 1, this.selectedCell.col)
        }
        break
      case 'ArrowLeft':
        if (this.selectedCell.col > 0) {
          this.selectCell(this.selectedCell.row, this.selectedCell.col - 1)
        }
        break
      case 'ArrowRight':
        if (this.selectedCell.col < this.grid[0].length - 1) {
          this.selectCell(this.selectedCell.row, this.selectedCell.col + 1)
        }
        break
    }
  }
}