vue实现选中单元格
Vue 实现选中单元格的方法
使用 v-bind 和 v-on 绑定样式和事件
在表格的单元格上绑定点击事件，通过动态类名或样式来改变选中状态。定义一个响应式数据存储当前选中的单元格信息，点击时更新该数据。
<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']
],
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>使用计算属性优化选中逻辑
对于复杂表格，可以用计算属性生成选中状态的二维数组，减少模板中的计算。
computed: {
cellSelection() {
return this.tableData.map((row, rowIndex) =>
row.map((_, colIndex) =>
this.isSelected(rowIndex, colIndex)
)
)
}
}支持多选模式
修改数据结构和事件处理，支持按住Ctrl键多选单元格。
data() {
return {
selectedCells: new Set()
}
},
methods: {
selectCell(event, row, col) {
const key = `${row},${col}`
if (event.ctrlKey) {
this.selectedCells.has(key)
? this.selectedCells.delete(key)
: this.selectedCells.add(key)
} else {
this.selectedCells = new Set([key])
}
}
}使用第三方表格组件
对于复杂需求，可以集成专业表格库如：
- VxeTable：提供完善的单元格选择API
- Element UI Table：通过row-class-name和cell-class-name定制选中样式
- AG Grid Vue：支持丰富的单元格选择配置
// VxeTable示例
<vxe-table
:data="tableData"
:checkbox-config="{ highlight: true }"
@cell-click="cellClickEvent"
/>键盘导航增强
添加键盘事件监听，实现方向键移动选中单元格。
mounted() {
window.addEventListener('keydown', this.handleKeyDown)
},
methods: {
handleKeyDown(e) {
if (!this.selectedCell.row) return
switch(e.key) {
case 'ArrowUp':
this.selectCell(Math.max(0, this.selectedCell.row - 1), this.selectedCell.col)
break
case 'ArrowDown':
this.selectCell(Math.min(this.tableData.length - 1, this.selectedCell.row + 1), this.selectedCell.col)
break
}
}
}每种方法适用于不同场景，基础项目可用纯Vue实现，复杂交互建议采用专业表格组件。性能关键点在于减少不必要的DOM操作，对于大型表格应考虑虚拟滚动技术。
