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

// 在data return里面定义的变量
rowHeight: 0,
currentIndex: -1, // 当前选中的行索引
 
// 在查询tbaleList的时候调用查询当前行高
this.getTableRowHeight();
 
// 查询当前行高
getTableRowHeight() {
    this.$nextTick(() => {
      const tableBody = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper tbody');
      if (tableBody && tableBody.rows.length > 0) {
        const firstRow = tableBody.rows[0];
        const rowHeight = firstRow.clientHeight;
        // console.log('第一行的高度:', rowHeight);
        this.rowHeight = rowHeight;
      }
    });
  },
 
handleKeydown(event) {
      if (event.keyCode === 38) { // 按下上键
        this.highlightPrevRow();
      } else if (event.keyCode === 40) { // 按下下键
        this.highlightNextRow();
      }
      const rowCount = this.boxList.length;
      // 获取表格行高度
      const rowHeight = this.rowHeight;
       if (rowCount === 0 || rowCount === undefined || rowHeight === NaN) {
        rowHeight = 36;
      }
      if (event.key === 'ArrowDown') {
        event.preventDefault();
        if (this.currentIndex < rowCount - 1) {
          this.currentIndex++;
          this.scrollToRow(this.currentIndex, rowHeight);
        }
      } else if (event.key === 'ArrowUp') {
        event.preventDefault();
        if (this.currentIndex > 0) {
          this.currentIndex--;
          this.scrollToRow(this.currentIndex, rowHeight);
        }
      }
    },
    scrollToRow(index, rowHeight) {
      const tableBody = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
      if (tableBody) {
        tableBody.scrollTop = index * rowHeight;
      }
    },