1、添加初始化的方法
// 添加键盘事件监听器：
mounted() {
window.addEventListener('keydown', this.handleKeydown);
},
// 这段代码的作用是在 Vue 组件销毁之前移除一个键盘事件监听器
// 这样做可以确保当组件不再使用时，不会留下任何未清理的事件监听器，从而避免内存泄漏等问题。
beforeDestroy() {
window.removeEventListener('keydown', this.handleKeydown);
}
2、在el-table中添加 @current-change方法
// 如下
<el-table @current-change="handleCurrentChange">
3、添加对应键盘操作方法
handleCurrentChange(val) {
this.currentRow = val;
},
handleKeydown(event) {
if (event.keyCode === 38) { // 按下上键
this.highlightPrevRow();
} else if (event.keyCode === 40) { // 按下下键
this.highlightNextRow();
}
},
highlightPrevRow() {
const index = this.boxList.indexOf(this.currentRow) - 1;
if (index >= 0) {
this.$refs.tableRef.setCurrentRow(this.boxList[index]);
}
},
highlightNextRow() {
const index = this.boxList.indexOf(this.currentRow) + 1;
if (index < this.boxList.length) {
this.$refs.tableRef.setCurrentRow(this.boxList[index]);
}
},
4、还可以为高亮设置自定义颜色
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row>td {
color: #fff;
background-color: #adeda6 !important;
}
