错误信息切换定位

src/components/BusinessButton.vue

@@ -8,12 +8,11 @@
 </template>
 <script>
 import commonApi from "~/mixin/commonApi"
+import Utils from "~/utils"
 export default {
     props:["$pntvm"],
     data(){
-        return{
-
-            
+        return{            
         }
     },
     methods:{
@@ -62,19 +61,7 @@ export default {
             } else {
                 const fields = this.getVM().$refs.modelForm.fields
                 const fieldErrors = result.fieldErrors;
-                for (const key in fieldErrors) {
-                    if (Object.hasOwnProperty.call(fieldErrors, key)) {
-                        const fieldError = fieldErrors[key];
-                        for (let i = 0; i < fields.length; i++) {
-                            const field = fields[i];
-                            if (field.prop === key) {
-                                field.validateState  = 'error';
-                                field.validateMessage = fieldError;
-                                break;
-                            }
-                        }
-                    }
-                }
+                Utils.positioningErrorMsg(fieldErrors, fields)
             }
         },
         exit(){

src/utils/index.js

@@ -157,4 +157,55 @@ export default class Utils {
         }
         return fn;
     }
+
+    static positioningErrorMsg(fieldErrors, formFields) {
+        let firstErrorItem = null
+        for (let i = 0; i < formFields.length; i++) {
+            const field = formFields[i];
+            for (const key in fieldErrors) {
+                if (Object.hasOwnProperty.call(fieldErrors, key)) {
+                    if (field.prop === key) {
+                        const fieldError = fieldErrors[key];
+                        field.validateState  = 'error';
+                        field.validateMessage = fieldError;
+                        if (!firstErrorItem) {
+                            firstErrorItem = field
+                        }
+                        break;
+                    }
+                }
+            }                    
+        }
+        if (firstErrorItem) {
+            let firstErrorTab = null
+            let parentVC = firstErrorItem
+            while(!firstErrorTab) {
+                const tag = parentVC.$vnode.tag
+                const tagsArr = tag.split("-")
+                const vcName = tagsArr[tagsArr.length - 1]
+                // 没有Tabs的表单
+                if (vcName === "ElForm") {
+                    break;
+                }
+                if (vcName === "ElTabPane") {
+                    firstErrorTab = parentVC
+                    break;
+                }
+                parentVC = parentVC.$parent;
+            }
+            if (firstErrorTab) {
+                const tabs = firstErrorTab.$parent
+                tabs.currentName = firstErrorTab.paneName
+            }
+            setTimeout(() => {
+                // 滚动到指定节点
+                firstErrorItem.$el.scrollIntoView({
+                    // 值有start,center,end，nearest，当前显示在视图区域中间
+                    block: 'center', 
+                    // 值有auto、instant,smooth，缓动动画（当前是慢速的）
+                    behavior: 'smooth' 
+                })
+            }, 0)
+        }
+    }
 }
\ No newline at end of file