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) {
  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;
}