Vue ElemetUI table的行实现按住上下键高亮上下移动效果

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) {console.log(event.keyCode)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;
}