vue3+element-plus跳转到第一个表单验证未通过处

前言：有时在一个v3+element-plus项目中，会有一个页面中的表单中dom一屏显示不完。可能想要提交的内容仅仅只是必填的（做了表单验证），而输入框过多或者输入的内容不符合输入要求，那么点击提交时必然是提交不了的。按照一般习惯，出了问题是从第一个出问题的地方开始。手动滚动到可能会嫌懒滚，下面笔者提供一种方式。

<el-form :model="ruleForm" :rules="rules" ref="Form" label-position="top">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入名称" v-model="ruleForm.name"></el-input>
        </el-form-item>
         ...
        <el-form-item>
          <el-button @click="confirm">提交</el-button>
        </el-form-item>
</el-form>

<script>
import { reactive, toRefs, ref } from "vue";
export default {
  setup() {
    const state = reactive({
      ruleForm: {
        name: "",
        ...
      },
      rules: {
        name: [
            { required: true, message: "请输入名称", trigger: "blur" },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        ...
      },
    });

    // Form 使用ref
    const Form = ref();

    // confirm
    const confirm = () => {
        //valid 是个布尔值
        //val 是未通过校验的字段,是个对象
        Form.value.validate((valid,val) => {
        if (valid) {
          // 验证通过执行
        } else {
          // 验证不通过执行
          setTimeout(() => {  //延时器的作用：避免‘is-error’在以下操作将要执行时还未渲染上

            //验证没通过会自动加上的类名is-error
            //这是获取第一个未通过的
            var isError = document.getElementsByClassName('is-error')[0] 
            var child = isError.querySelector('label').getAttribute('for')

            //获取以对象属性名为元素的数组
            var obj = Object.keys(val)

            obj.forEach(function(item,index) {
              if(item == child) {
                //scrollToField() 是element-plus提供的方法，elementui中没有
                Form.value.scrollToField(obj[index]) //这一步会跳转到第一个未通过的
              }
            })
          },100)

          //--------------------------
          // 事实上，以上是我做了多余的动作，只需要以下就行（2022.4.26改）
            
          var obj = Object.keys(val)
          Form.value.scrollToField(obj[0])
        }
      })
       
    };
    
    return {
      ...toRefs(state),
      Form,
      confirm
    };
  },
};
</script>

总结：关于跳转到第一个未通过的表单验证处，代码就这么简单，有兴趣的小伙伴可以试一下