el-table光标默认选中第一条 键盘上下移动光标移动

在Vue的Element UI库中，`el-table`是一个用于展示表格数据的组件，如果想让表格默认显示第一条并且支持键盘上下箭头控制光标移动，你可以通过设置表单的`default-row-key`属性来指定行的唯一标识，并配置`@row-click`事件监听用户点击。

首先，在data中设置一个默认的`rowKey`，例如当索引为0的数据作为默认选中项：

data() {
  return {
    tableData: [
      // ...你的表格数据
    ],
    defaultRowKey: 0 // 设置默认选中项的键值
  }
}

然后，在`el-table`组件上添加`default-row-key`和`@row-click`事件处理：

<template>
  <el-table :data="tableData" ref="table">
    <!-- ...其他el-table的列和配置 -->
    <el-table-column type="selection" label="选择"></el-table-column>
    <el-table-column prop="index" label="#" align="center"> <!-- 添加一个序号列便于操作 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleRowClick(row) {
      if (row.index === this.defaultRowKey) { // 如果点击的是默认项
        this.$refs.table.setCurrentRow(null); // 清除当前选中行
      } else {
        this.$refs.table.setCurrentRow(row); // 否则设置新的选中项
      }
    }
  },
  mounted() {
    this.$refs.table.setCurrentRow(this.tableData[this.defaultRowKey]); // 初始化时选中默认项
  }
}
</script>

这样，当你打开页面时，第一行会被默认选中。当用户按键盘上下箭头时，会触发`handleRowClick`方法，根据当前焦点所在的行调整选中状态。