如何在Vuetify v-data-table中实现键盘导航？临时方案解析

Vuetify团队仍在开发数据表格单选框的键盘导航功能（相关公开议题在Vuetify的GitHub仓库中），若你急需该功能，可采用以下临时方案。

临时方案思路 #

基于利用Tab键切换复选框的思路，通过@focus事件实现单选框的键盘交互。

代码示例 #

<template>
  <v-container>
    <v-data-table
      class="elevation-1"
      v-model="selectedItem"
      :headers="headers"
      :items="items"
      height="750"
      fixed-header
      show-select
      single-select
      disable-pagination
    >
      <!-- v-simple-checkbox 不可聚焦，因此替换为v-checkbox -->
      <template #item.data-table-select="{ isSelected, select }">
        <!-- 可能存在对齐问题，可按需添加CSS调整 -->
        <v-checkbox
          :value="isSelected"
          hide-details
          @focus="select(!isSelected)"
          @change="select(!isSelected)"
        ></v-checkbox>
      </template>
    </v-data-table>
  </v-container>
</template>

方案注意事项 #

• 无法通过方向键进行导航
• 必须为表格添加show-select和single-select属性
• 焦点有时会出现跳转异常：例如按Tab键选中item 7后点击item 3，下次按Tab键会选中item 8而非item 4

方案说明 #

若仅需临时满足需求，该方法可适用；若需要完整的键盘导航解决方案，需等待Vuetify 3版本发布。

内容的提问来源于stack exchange，提问作者PyKKe