点击方向键切换表格内的输入框

 简易版

 <template slot="theorySolt" slot-scope="{ scope }">
         <el-input
          v-model="scope.row.theoreticalScore"
          type="number"
          :disabled="!btnType.import"
          @change="changeNum(scope.row, 'theoreticalScore')"
          @keyup.native.prevent="
            clickInput(scope.row, scope.index, 'theoreticalScore', $event)
          "
          :id="'0-' + scope.index"
          @keydown.native.up.prevent
          @keydown.native.down.prevent
        ></el-input>
      </template>
      <!-- 电子技术成绩 -->
      <template slot="eleTSolt" slot-scope="{ scope }">
        <el-input
          v-model="scope.row.electronicScore"
          type="number"
          :disabled="!btnType.import"
          @change="changeNum(scope.row, 'eleTeScore')"
          @keyup.native.prevent="
            clickInput(scope.row, scope.index, 'eleTeScore', $event)
          "
          :id="'1-' + scope.index"
          @keydown.native.up.prevent
          @keydown.native.down.prevent
        ></el-input>
      </template>
      <!-- 自动化控制成绩 -->
      <template slot="autoSolt" slot-scope="{ scope }">
        <el-input
          v-model="scope.row.automationScore"
          type="number"
          :disabled="!btnType.import"
          @change="changeNum(scope.row, 'autoConScore')"
          @keyup.native.prevent="
            clickInput(scope.row, scope.index, 'autoConScore', $event)
          "
          :id="'2-' + scope.index"
          @keydown.native.up.prevent
          @keydown.native.down.prevent
        ></el-input>
      </template>
      <!-- PLC编程成绩 -->
      <template slot="plcSolt" slot-scope="{ scope }">
        <el-input
          v-model="scope.row.plcScore"
          type="number"
          :disabled="!btnType.import"
          @change="changeNum(scope.row, 'plcScore')"
          @keyup.native.prevent="
            clickInput(scope.row, scope.index, 'plcScore', $event)
          "
          :id="'3-' + scope.index"
          @keydown.native.up.prevent
          @keydown.native.down.prevent
        ></el-input>
      </template>



 clickInput(val, index, type, event) {
      // theoreticalScore 理论考试成绩
      // eleTeScore 电子技术成绩
      // autoConScore 自动化控制成绩
      // plcScore  PLC编程成绩
     
      
      let xPoint;
      switch (type) {
        case "theoreticalScore":
          xPoint = 0;
          break;
        case "eleTeScore":
          xPoint = 1;
          break;
        case "autoConScore":
          xPoint = 2;
          break;
        case "plcScore":
          xPoint = 3;
          break;
        default:
          break;
      }
      let point;
      if (event.code == "ArrowRight") {
        if(type=='plcScore')return
        xPoint++;
        point = xPoint + "-" + index;
      }
      if (event.code == "ArrowLeft") {
        if(type=='theoreticalScore')return
        xPoint--;
        point = xPoint + "-" + index;
      }
      if (event.code == "ArrowUp") {
        if (index ==0) return;
        index--;
        point = xPoint + "-" + index;
      }
      if (event.code == "ArrowDown") {
        if (index+1 == this.total) return;
        index++;
        point = xPoint + "-" + index;
      }
      this.$nextTick(() => {
        document.getElementById(point)?.focus();
      });
    },

X轴固定为0,1,2,3   Y轴根据表格的条数进行限制

 整个单元格切换

//表格获取到之后调用
this.$nextTick(() => {
                this.keyUpChang();
              });  


// 监听输入框按键   ----表格父级添加id =changInputDig 
    keyUpChang(ev) {
      let tables;
      tables = document
        .getElementById("changInputDig")
        .querySelectorAll(".el-table"); // 获取所有 el-table 元素
      // 先销毁监听
      document.removeEventListener("keydown", () => {});

      // 监听按键按下事件
      document.addEventListener("keydown", (event) => {

        if (
          event.key === "ArrowUp" ||
          event.key === "ArrowDown" ||
          event.key === "ArrowLeft" ||
          event.key === "ArrowRight"
        ) {
          event.preventDefault(); // 阻止默认行为，防止滚动等

          tables.forEach((table, tableIndex) => {
            const rowsWarp = document.querySelectorAll(".el-table__row"); // 获取当前 el-table__row 元素
            // let currentTableIsLast = tableIndex === tables.length - 1;
            let currentTableIsLast = false;

            // 查找当前焦点所在行和列
            let currentRow, currentCol;
            let rows = [];

            for (let rowIndex = 0; rowIndex < rowsWarp.length; rowIndex++) {
              let row = rowsWarp[rowIndex];
              let inputs;
              inputs = row.querySelectorAll("input"); // 获取当前行内的所有 input 元素
              console.log("event",event)
              inputs.forEach((input, colIndex) => {
                if (input === document.activeElement) {
                  currentRow = rowIndex;
                  currentCol = colIndex;
                }
              });
              if (inputs.length > 0) {
                rows.push(row);
              }
            }

            if (currentRow !== undefined && currentCol !== undefined) {
              let nextRow, nextCol;

              if (event.key === "ArrowUp") {
                if (currentRow === 0) {
                  // Check if current row is the first row
                  // const prevTable = tables[tableIndex - 1];
                  // if (prevTable) {
                  //   let lastInputOfPrevTable = prevTable.querySelector(
                  //     ".el-table__row:last-child input:not([disabled])"
                  //   );

                  //   if (!lastInputOfPrevTable) {
                  //     lastInputOfPrevTable = prevTable.querySelector(
                  //       ".el-table__row input:not([disabled])"
                  //     );
                  //   }

                  //   if (lastInputOfPrevTable) {
                  //     setTimeout(() => {
                  //       lastInputOfPrevTable.focus();

                  //       lastInputOfPrevTable.select();
                  //     }, 100);
                  //   }
                  //   return false;
                  // }
                  currentTableIsLast = true;
                } else {
                  nextRow = currentRow - 1 >= 0 ? currentRow - 1 : currentRow;
                  nextCol = currentCol;
                }
              } else if (event.key === "ArrowDown") {
                if (currentRow + 1 > rows.length - 1) {
                  currentTableIsLast = true;
                }
                nextRow =
                  currentRow + 1 < rows.length ? currentRow + 1 : currentRow;
                nextCol = currentCol;
              } else if (event.key === "ArrowLeft") {
                nextRow = currentRow;
                nextCol = currentCol - 1 >= 0 ? currentCol - 1 : currentCol;
              } else if (event.key === "ArrowRight") {
                nextRow = currentRow;
                nextCol =
                  currentCol + 1 <
                  rows[currentRow].querySelectorAll("td").length
                    ? currentCol + 1
                    : currentCol;
              }

              let nextInput;

              if (currentTableIsLast) {
                nextInput = null;
              } else {
                nextInput = rows[nextRow].querySelectorAll("input")[nextCol];
              }

              if (nextInput && !nextInput.disabled) {
                nextInput.focus();
                nextInput.select(); // 将选中焦点设置到下一个 input
              } else if (currentTableIsLast) {
                const nextTable = tables[tableIndex + 1];
                if (nextTable) {
                  const firstInputOfNextTable = nextTable.querySelector(
                    ".el-table__row input:not([disabled])"
                  );
                  if (firstInputOfNextTable) {
                    setTimeout(() => {
                      firstInputOfNextTable.focus();
                      firstInputOfNextTable.select();
                    }, 100);
                  }
                }
              }
            }
          });
        }
      });
    },