el-from校验精准定位的问题——提升客户体验度

el-from校验精准定位的问题

适用场景：表单内容过多不同屏幕可能出现滚动条，此时提交表单部分字段被遮挡，导致用户无法直观的看到错误提示。
目标效果：如果校验不通过，可以直接定位到错误的位置。
具体代码实现：

1. el-form表单代码

<el-form ref="elForm" :model="dialogForm" label-width="130px" label-position="left" :rules="rules">
   <el-form-item label="企业名称" prop="entName" ref="entName" >
         <el-input v-model.trim="dialogForm.entName" placeholder="请输入企业名称"></el-input>
   </el-form-item>
   ...此处省略很多el-form-item
</el-form>
<el-button v-loading="btnLoading" type="primary" @click="submit">提交</el-button>
methods(){
  submit(){
    this.$refs.formLegalPerson.$refs.elForm.validate(async (valid, objects) => {
       if (valid) {
        //校验通过后的逻辑
       } else {
         // 如果校验不通过，定位到固定的位置,只操作第一个即可
         Object.keys(objects).forEach((v, index) => {
           if (index === 0) {
             if (this.$refs[v]) {
               this.$refs[v].$el.scrollIntoView({
                 block: "center",
                 behavior: "smooth"
               });
             }
           }
         });
       }
     });
    }
}

解析：
1.validate方法会以对象的形式返回校验不通过的字段，代码中的objects（格式：{entName:[]...}）；
2.遍历对象循环获得第一个校验不通过的字段名；
3.$refs.name.$el获取dom元素；
4.element.scrollIntoView让element元素显示在可视窗口中。

关于$refs：

如果ref定位在普通元素上，那么使用$refs.name获取的是dom元素；
如果ref定位在组件上，那么使用$refs.name获取的是对应组件的实例；
如上代码ref是在el-form-item上，所以this.$refs[v]获取的是组件实例，再使用.$el获取到dom元素

关于index的判断：

返回的所有错误校验只需要定位到第一个即可，一方面节省资源，另一方面直接定位第一个也是页面最上边的一个，体验较好。