vue+elementui 表单回车到下一项

util.js中定义方法：nextFocus

/**
 * 表单：回车到下一项
 * @param {表单名称} formName
 * @param {提交方法}} callback
 */
export function nextFocus(formName, callback) {
  // 获取到表单的所有input输入框
  const inputDoms = document.querySelectorAll(`#${formName} .el-input__inner`);

  // 遍历input输入框
  inputDoms.forEach((item, index) => {
    // 添加索引
    item.setAttribute("data-index", index);
    // 添加事件处理程序
    item.addEventListener('keyup', function (e) {
      var ev = typeof event != "undefined" ? window.event : e;
      if (ev.keyCode == 13) {
        // 获取当前录入input的索引值
        const index = ev.target.getAttribute("data-index");
        const nextIndex = parseInt(index) + 1;
        const length = inputDoms.length;

        // 如果不是最后一个，则跳到下一项，如果是，走提交
        if (nextIndex < length) {
          inputDoms[nextIndex].focus();
        } else {
          if (typeof callback === "function") {
            callback();
          }
        }
      }
    });
  });
}

form表单所在vue文件中使用

import { nextFocus } from "@/util/util";

// 添加监听
watch: {
  // 监测用户编辑弹框
  userDialogVisible: function() {
    this.$nextTick(() => {
      if (this.userDialogVisible) {
        // 回车到下一项
        nextFocus("userForm", this.submitUserForm);
      }
    });
  }
}

补充：表单回车功能实现后，会影响下拉框点击空白处隐藏的效果，需要在所有el-select控件中加v-clickoutside。