elementUI表单校验失败后定位到具体的input聚焦

场景: 如下图, 在出现滚动条的情况下, 当点击保存按钮校验失败后, 用户看不到具体的校验信息的. 需要手动像上滑动. 这样的话交互体验欠佳.

方案: 点击保存校验失败后聚焦到具体的某个input控件, 随之 滚动条也会自动上滑

具体步骤如下: 在按需加载form表单之后, 拿到validate方法.  并在其方法上判断校验失败后聚焦到具体控件的效果. 再注册到实例中

import { Form } from 'element-ui';
const components = [ from ]


export default {
  install: (Vue) => {
    const originValidate = Form.methods.validate;
    Form.methods.validate = function (callback) {
      function callbackInterceptor(valid, invalidFields) {
        callback(valid, invalidFields);
        Vue.prototype.$nextTick(() => {
          if (valid === false) {
            var isError = document.getElementsByClassName("is-error");
            isError[0].querySelector("input").focus();
          }
        });
      }
      originValidate.call(this, callbackInterceptor);
    };
    components.forEach((component) => {
      Vue.component(component.name, component);
    });

   
  },
};