前言公司产品需求要求一个考勤表可以使用键盘方向键控制当前选中的Cell，回车触发弹窗显示和修改。第一种选择是给需要获取键盘事件的元素加上tabIndex="0"属性。请注意，默认情况下div元素没有它。focus属性，并且没有keyup事件keyup.up="changeCellSelect('up')"@keyup.down="changeCellSelect('down')"@keyup.enter="changeUserData(callbackdata.data[selectedCell.row][selectedCell.col],selectedCell.row,selectedCell.col)"tabindex="0">然后我们定义一个selectedmodelselectedCell:{//Thecellrow:'',col:''}selectedinthecurrenttable,实现el-table中的cell选择效果，这里需要使用cell-class-name属性来实现，//当单元格被点击时激活状态选定单元格'}返回''},.selected-cell{border:2pxsolid#67C23A;背景色：#f0f9eb；当点击Cell时，触发的事件会将对应的rowIndex和columnIndex传递给this.selectedCell，而this是实现了点击Cell加上一个类.selected-cell来实现高亮显示。接下来我们需要实现键盘方向键控制高亮显示，注意索引超过或小于0时??的情况//键盘触发修改changeCellSelect(direction){let{row,col}=this.selectedCellswitch(direction){case'right':col===this.callbackdata.data[0].length-1?col=0:col++breakcase'left':col===0?col=this.callbackdata.data[0].length-1:col--breakcase'up':row===0?row=this.callbackdata.data.length-1:row--breakcase'down':row===this.callbackdata.data.length-1?row=0:row++break}this.selectedCell={row,col}}，注意当单元格被点击触发对话框修改内容时，对话框关闭后，键盘方向键不能触发单元格的移动cell，因为dialog是appendToBody，所以需要手动为div重新获取焦点，使用dialog的close方法调用focus//关闭修改后的dialog时，让最外层的div.attend-container重新获得焦点attendContainerfocus(){this.$refs.attendContainer.focus()},
