vue实现选中单元格
Vue 实现选中单元格的方法
基础实现思路
在 Vue 中实现选中单元格功能，通常可以通过动态绑定 class 或 style 来实现。以下是一个基于表格的简单实现示例：
<template>
<table>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td
v-for="(cell, colIndex) in row"
:key="colIndex"
:class="{ 'selected': isSelected(rowIndex, colIndex) }"
@click="selectCell(rowIndex, colIndex)"
>
{{ cell }}
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
['A1', 'B1', 'C1'],
['A2', 'B2', 'C2'],
['A3', 'B3', 'C3']
],
selectedCell: null
}
},
methods: {
selectCell(row, col) {
this.selectedCell = { row, col }
},
isSelected(row, col) {
return this.selectedCell &&
this.selectedCell.row === row &&
this.selectedCell.col === col
}
}
}
</script>
<style>
.selected {
background-color: #42b983;
color: white;
}
</style>多选功能实现
如果需要实现多选单元格功能，可以修改数据结构来存储多个选中的单元格：
<script>
export default {
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
)
}
}
}
</script>高级功能扩展
对于更复杂的需求，如区域选择或快捷键支持，可以考虑以下扩展：
handleKeyDown(event) {
if (event.ctrlKey && event.key === 'a') {
this.selectAllCells()
event.preventDefault()
}
},
selectAllCells() {
this.selectedCells = []
this.tableData.forEach((row, rowIndex) => {
row.forEach((_, colIndex) => {
this.selectedCells.push({ row: rowIndex, col: colIndex })
})
})
}性能优化建议
对于大型表格，直接操作 DOM 可能影响性能。可以考虑使用虚拟滚动技术，或通过计算属性来优化选中状态的判断：
computed: {
selectedCellsMap() {
const map = {}
this.selectedCells.forEach(cell => {
map[`${cell.row}-${cell.col}`] = true
})
return map
}
},
methods: {
isSelected(row, col) {
return !!this.selectedCellsMap[`${row}-${col}`]
}
}以上方法提供了从基础到高级的单元格选中实现方案，可以根据具体需求选择合适的实现方式。
