vue 如何實現 vxe-table 的按鍵操作回車鍵的上下移動修改為 Tab 鍵的左右切換，支持將回車鍵替換Tab鍵的功能操作

https://vxetable.cn

通過設置 keyboard-config.enterToTab 將回車鍵上下切換行為修改為 Tab 鍵左右切換行為,還可以通過 keyboard-config.enterMethod 覆蓋默認行為實現自定義業務邏輯

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  mouseConfig: {
    area: true // 是否開啓區域選取
  },
  areaConfig: {
    multiple: true // 是否啓用多區域選取功能
  },
  editConfig: {
    mode: 'cell', // 單元格編輯模式
    trigger: 'dblclick' // 雙擊單元格激活編輯狀態
  },
  keyboardConfig: {
    arrowCursorLock: true, // 方向鍵光標鎖，開啓後處於非聚焦式編輯狀態，將支持在編輯狀態中通過方向鍵切換單元格。（切換為聚焦編輯狀態，可以按 F2 鍵或者鼠標左鍵點擊輸入框，就可以用方向鍵左右移動輸入框的光標）
    enterToTab: true, // 是否將回車鍵上下切換行為修改為 Tab 鍵左右切換行為
    isClip: true, // 是否開啓複製粘貼
    isArrow: true, // 是否開啓方向鍵功能
    isShift: true, // 是否開啓同時按住方向鍵以活動區域為起始，向指定方向擴展單元格區域
    isTab: true, // 是否開啓 Tab 鍵功能
    isEnter: true, // 是否開啓回車鍵功能
    isEdit: true, // 是否開啓任意鍵進入編輯（功能鍵除外）
    isBack: true, // 是否開啓 Backspace 鍵功能
    isDel: true, // 是否開啓刪除鍵功能
    isEsc: true, // 是否開啓Esc鍵關閉編輯功能
    isFNR: true, // 是否開啓查找與替換
    isMerge: true, // 是否開啓單元格合併功能
    isChecked: true // 是否啓用複選框/單選框按空格鍵選中/取消功能
  },
  columns: [
    { type: 'seq', fixed: 'left', width: 60 },
    { type: 'checkbox', fixed: 'left', width: 60 },
    { field: 'name', fixed: 'left', title: 'name', width: 200, editRender: { name: 'input' } },
    { field: 'role', title: 'Role', width: 200, editRender: { name: 'input' } },
    {
      field: 'sex',
      title: 'sex',
      width: 250,
      editRender: {
        name: 'VxeSelect',
        options: [
          { label: 'Man', value: '1' },
          { label: 'Women', value: '0' }
        ]
      }
    },
    { field: 'num1', title: 'Num1', width: 200, editRender: { name: 'input' } },
    { field: 'num2', title: 'Num2', width: 250, editRender: { name: 'input' } },
    { field: 'num3', title: 'Num3', width: 300, editRender: { name: 'input' } },
    { field: 'age', title: 'age', fixed: 'right', width: 100, editRender: { name: 'input' } },
    { field: 'address', title: 'Address', fixed: 'right', width: 300, editRender: { name: 'input' } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: '1', num1: 12, num2: 21, num3: 78, age: 28, address: 'Shengzhen' },
    { id: 10002, name: 'Test2', role: 'Test', sex: '0', num1: 23, num2: 45, num3: 23, age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: '1', num1: 23, num2: 12, num3: 68, age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: '0', num1: 23, num2: 23, num3: 47, age: 24, address: 'Shanghai' },
    { id: 10005, name: 'Test5', role: 'Designer', sex: '0', num1: 32, num2: 77, num3: 65, age: 42, address: 'Guangzhou' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: '1', num1: 39, num2: 66, num3: 87, age: 38, address: 'Shengzhen' },
    { id: 10007, name: 'Test7', role: 'Test', sex: '0', num1: 23, num2: 44, num3: 23, age: 24, address: 'Shengzhen' },
    { id: 10008, name: 'Test8', role: 'PM', sex: '1', num1: 23, num2: 23, num3: 87, age: 34, address: 'Shanghai' },
    { id: 10009, name: 'Test9', role: 'Designer', sex: '1', num1: 91, num2: 23, num3: 24, age: 52, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Test', sex: '0', num1: 20, num2: 72, num3: 54, age: 44, address: 'Guangzhou' },
    { id: 10011, name: 'Test11', role: 'Designer', sex: '1', num1: 56, num2: 32, num3: 63, age: 52, address: 'Shanghai' },
    { id: 10012, name: 'Test12', role: 'Test', sex: '0', num1: 34, num2: 65, num3: 54, age: 47, address: 'Guangzhou' },
    { id: 10013, name: 'Test13', role: 'Test', sex: '0', num1: 39, num2: 65, num3: 435, age: 47, address: 'Guangzhou' },
    { id: 10014, name: 'Test14', role: 'Test', sex: '0', num1: 44, num2: 65, num3: 324, age: 45, address: 'Guangzhou' },
    { id: 10015, name: 'Test15', role: 'Test', sex: '0', num1: 45, num2: 56, num3: 54, age: 39, address: 'Guangzhou' },
    { id: 10016, name: 'Test16', role: 'Test', sex: '0', num1: 34, num2: 65, num3: 344, age: 44, address: 'Shanghai' },
    { id: 10017, name: 'Test17', role: 'Test', sex: '0', num1: 78, num2: 77, num3: 78, age: 48, address: 'Guangzhou' },
    { id: 10018, name: 'Test18', role: 'Test', sex: '0', num1: 32, num2: 12, num3: 45, age: 89, address: 'Shanghai' },
    { id: 10019, name: 'Test19', role: 'Test', sex: '0', num1: 42, num2: 65, num3: 8, age: 52, address: 'Guangzhou' },
    { id: 10020, name: 'Test20', role: 'Test', sex: '0', num1: 56, num2: 45, num3: 4, age: 41, address: 'Shanghai' },
    { id: 10021, name: 'Test21', role: 'Test', sex: '1', num1: 48, num2: 65, num3: 54, age: 49, address: 'Guangzhou' },
    { id: 10022, name: 'Test22', role: 'Test', sex: '0', num1: 41, num2: 65, num3: 12, age: 50, address: 'Shanghai' }
  ]
})
</script>

https://gitee.com/x-extends/vxe-table