el-table 方向键移动 高亮

您可以通过设置`highlight-current-row`属性来启用行高亮，并且使用`current-row-key`属性来指定当前高亮行的索引。至于使用方向键来移动高亮行，您需要使用`@keydown`事件监听键盘按键事件，在事件处理函数中判断按下的键是否是方向键，如果是，则更新`current-row-key`属性的值。

以下是一个示例代码：

<template>
  <el-table
    :data="tableData"
    :highlight-current-row="true"
    :current-row-key="currentRowKey"
    @keydown="handleKeyDown"
  >
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Mary', age: 25, address: 'Los Angeles' },
        { name: 'Peter', age: 40, address: 'Chicago' },
      ],
      currentRowKey: null,
    };
  },
  methods: {
    handleKeyDown(event) {
      // 判断按下的键是否是方向键
      if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
        // 阻止默认行为，避免页面滚动
        event.preventDefault();
        // 计算当前高亮行的索引
        let currentIndex = this.currentRowKey == null ? -1 : this.tableData.findIndex(item => item[this.$refs.table.currentRowKey] === this.currentRowKey);
        if (event.key === 'ArrowUp') {
          // 向上移动高亮行
          currentIndex = Math.max(currentIndex - 1, 0);
        } else if (event.key === 'ArrowDown') {
          // 向下移动高亮行
          currentIndex = Math.min(currentIndex + 1, this.tableData.length - 1);
        }
        // 更新当前高亮行的索引
        this.currentRowKey = this.tableData[currentIndex][this.$refs.table.currentRowKey];
      }
    },
  },
};
</script>

在上面的示例代码中，我们使用了`@keydown`事件监听键盘按键事件，并在事件处理函数`handleKeyDown`中判断按下的键是否是方向键，然后计算出当前高亮行的索引，并将其赋值给`currentRowKey`属性，从而实现了使用方向键移动高亮行的效果。