修改前端校验失败不展开收缩框问题

src/mixin/operationFunc.js

@@ -88,36 +88,50 @@ export default {
               message: '校验失败',
               type: 'error',
             });
-            this.$nextTick(() => {
-              console.log('========', this.$refs['modelForm'])
-              let isError = document.querySelectorAll('.is-error')
-              let fields = this.$refs['modelForm'].fields
-              fields.map((fieldItem) => {
-                if (fieldItem.validateState === 'error') {
-                  let errorComponentName = fieldItem.$options.componentName
-                  // console.log('fieldItem===', fieldItem)
-                  // 切换tab
-                  if (errorComponentName === 'ElTabPane') {
-                    fieldItem.$parent.currentName = fieldItem.name
-                    // 切换收缩框
-                  } else if (errorComponentName === 'ElCollapseItem') {
-                    if (fieldItem.collapse.activeNames.indexOf(fieldItem.name) < 0) {
-                      fieldItem.collapse.activeNames.push(fieldItem.name)
-                    }
-                  }
-                }
-              })
-              isError[0].scrollIntoView({
-                block: 'center',
-                behavior: 'smooth'
-              })
-            })
+            this.showFrontendErrors()
           }
         })
       })
     },
+    // 前端校验失败时候，tab和Collapse组件效果处理
     showFrontendErrors () {
-
+      this.$nextTick(() => {
+        let fields = this.$refs['modelForm'].fields
+        fields.map((fieldItem) => {
+          if (fieldItem.validateState === 'error') {
+            let parentVC = fieldItem
+            let firstErrorTab = null
+            let collapsePanel = null
+            while(!firstErrorTab) {
+              const vcName = parentVC.$options.componentName
+              // 没有Tabs的表单
+              if (vcName === "ElForm") {
+                  break;
+              }
+              if (vcName === "ElTabPane") {
+                  firstErrorTab = parentVC
+                  break;
+              }
+              if (vcName === "ElCollapseItem") {
+                  collapsePanel = parentVC;
+              }
+              parentVC = parentVC.$parent;
+            }
+            if (firstErrorTab) {
+              const tabs = firstErrorTab.$parent
+              tabs.currentName = firstErrorTab.name
+            }
+            if (collapsePanel && collapsePanel.collapse.activeNames.indexOf(collapsePanel.name) < 0) {
+              collapsePanel.collapse.activeNames.push(collapsePanel.name)
+            }
+          }
+        })
+        let isError = document.querySelectorAll('.is-error')
+        isError[0].scrollIntoView({
+          block: 'center',
+          behavior: 'smooth'
+        })
+      })
     },
     // 后端校验
     showBackendErrors(fieldErrors) {
@@ -132,6 +146,7 @@ export default {
         this.isChecking = false;
       }
       const fields = this.$refs.modelForm.fields;
+      console.log('backFileds', fields)
       const tab = Utils.positioningErrorMsg(fieldErrors, fields);
       return tab;
     },