el-form表单校验不通过时,自动定位到第一项不通过位置

1. el-form表单添加ref属性(el-form-item最好也添加下ref属性)

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm">
    <el-form-item label="用户名" prop="username" ref='username'>
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password"  ref='password'>
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>

2. 调用validate方法实现定位

this.$refs['form'].validate((valid, object) => {
        if (valid) {
          // 验证通过
        } else {
          let str = [];
          for (let key in object) {
            object[key].map((item) => {
              str.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0];
              break; //结束语句并跳出语句，进行下个语句执行
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            });
          }
          // 页面提示未通过校验字段项，并以逗号分隔
          this.$message.error(str[0]);
        }
      });
    }