vue 3 中实现键盘上下键控制表格选中行，需为容器设 tabindex="0" 并聚焦，监听 arrowup/arrowdown 更新 selectedidx，调用 setcurrentrow 或 togglerowselection，并用 scrollintoview 保持可见，配合 enter/escape 及 blur 清理状态。
在 Vue 3 中实现键盘上下键控制表格选中行，核心是监听 keydown 事件、维护当前选中索引、调用表格组件的选中方法（如 Element Plus 的 toggleRowSelection 或 Ant Design Vue 的自定义高亮逻辑），并确保表格容器可聚焦。不需要引入额外库，原生能力已足够稳定可靠。
确保表格容器能接收键盘事件
Element Plus 的 <el-table></el-table> 默认不响应键盘事件，需手动赋予焦点能力：
- 给包裹表格的外层容器（如
<div>）添加 <code>tabindex="0"，使其可被聚焦 - 在组件挂载后（
onMounted）调用focus()，或由用户首次点击/回车触发聚焦 - 避免直接给
<el-table></el-table>加tabindex，因其内部结构复杂，焦点行为不可控 - 用响应式变量（如
selectedIdx = ref(0)）记录当前高亮行索引 - 按下上键时：若当前为第 0 行，则跳转到最后行；否则
selectedIdx.value-- - 按下下键时：若当前为末尾行，则跳转到第 0 行；否则
selectedIdx.value++ - 每次变更后，调用
tableRef.value?.setCurrentRow(dataList[selectedIdx.value])（Element Plus 支持高亮单行）或clearSelection + toggleRowSelection（多选模式） - 获取当前选中行 DOM 元素：
const rowEl = tableRef.value?.$el.querySelector(`.el-table__row:nth-child(${selectedIdx.value + 1})`) - 调用
rowEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' }) - 注意加防抖或节流，避免快速连按造成滚动抖动
- 若使用虚拟滚动（如
el-table-v2），需改用其提供的scrollToAPI 定位行号 - 监听
Enter键：触发确认逻辑（如 emit 选中数据、关闭弹窗） - 监听
Escape键：清空选中并 blur 当前容器，退出键盘导航态 - 监听
blur事件：当用户点击其他区域时，自动清除表格高亮，避免状态残留 - 可选：用
v-show控制表格是否启用键盘导航，例如仅在弹窗打开时激活
监听上下键并更新选中状态
使用 @keydown 绑定事件处理器，区分 ArrowUp 和 ArrowDown（推荐用 event.key 而非 keyCode，更语义化且兼容性好）：
保持选中行始终可见（滚动同步）
当表格内容超出可视区域，上下键切换时容易导致选中行“消失”：
配合回车确认与失焦清理
增强可用性，让操作闭环：
