页面内容中在检验元素上加 ref

<el-form
  ref="form"
  :model="model"
  :rules="rules"
  @submit.native.prevent="handleSubmit"
>
  <el-form-item ref="name" label="姓名" prop="name">
    <el-input v-model="model.name"/>
  </el-form-item>
  <el-form-item ref="age" label="年龄" prop="age">
    <el-select v-model="model.age">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form-item>
</el-form>

提交事件代码逻辑

methods: {
  handleSubmit() {
    this.$refs.form.validate((valid, obj) => {
      if(valid){
        // 校验通过
      }else{
        // 滚动到第一个校验未通过的元素位置
        const keys = Object.keys(obj);
        const El = this.$refs?.form.$refs?.[keys[0]];
        if (El) {
          El.$el.scrollIntoView({
            block: 'center', // value: start, center, end, nearest 显示位置
            behavior: 'smooth', // value: auto, instant, smooth 滚动动画
          });
        }
      }
    })
  },
},