element-plus表格上下键滚动_element plus table上下移动

<template>
  <div>
    <el-table
      ref="singleTableRef"
      width="200px"
      :data="tableData"
      highlight-current-row
      height="500"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <!-- 其他列定义 -->
      <el-table-column>
        <template #scope>
          <el-table-column label="操作">
            <el-button @click="deleteRow(scope.$index)">删除</el-button>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'xiaodong1' },
        { name: 'xiaodong2' },
        { name: 'xiaodong3' },
        { name: 'xiaodong4' },
        { name: 'xiaodong5' },
        { name: 'xiaodong6' },
        { name: 'xiaodong7' },
        { name: 'xiaodong8' },
        { name: 'xiaodong9' },
        { name: 'xiaodong10' },
        { name: 'xiaodong11' },
        { name: 'xiaodong12' },
        { name: 'xiaodong13' },
        { name: 'xiaodong14' },
        { name: 'xiaodong15' },
        { name: 'xiaodong16' },
        { name: 'xiaodong17' },
        { name: 'xiaodong18' },
        { name: 'xiaodong19' },
        { name: 'xiaodong20' },
        { name: 'xiaodong21' },
        { name: 'xiaodong22' },
        { name: 'xiaodong23' },
      ], // 表格数据
      selectedRowIndex: 0, // 当前选中行索引
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeyDown)
    this.$refs.singleTableRef.setCurrentRow(this.tableData[0])
  },
  methods: {
    handleKeyDown(event) {
      // 更新选中行索引
      if (event.key === 'ArrowUp') {
        // 向上箭头键，选中上一行
        if (this.selectedRowIndex > 0) {
          this.selectedRowIndex--
        } else {
          this.selectedRowIndex = this.tableData.length - 1
        }
        // // 滚动到选中行
        const rowElement = document.querySelector(
          `.el-table__row:nth-child(${this.selectedRowIndex + 1})`,
        )
        this.$refs.singleTableRef.setCurrentRow(this.tableData[this.selectedRowIndex])
 
        rowElement.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
      } else if (event.key === 'ArrowDown') {
        // 向下箭头键，选中下一行
        if (this.selectedRowIndex < this.tableData.length - 1) {
          this.selectedRowIndex++
        } else {
          this.selectedRowIndex = 0
        }
        // // 滚动到选中行
        const rowElement = document.querySelector(
          `.el-table__row:nth-child(${this.selectedRowIndex + 1})`,
        )
        this.$refs.singleTableRef.setCurrentRow(this.tableData[this.selectedRowIndex])
        rowElement.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
      }
    },
  },
}
</script>
<style lang="scss">
 
</style>