update 增加了房屋安全的幕墙和面砖表单,未匹配字段

Web/public/doc-code/seed/form-page/tab-form/tab.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的页签外框架
-    v 1.0
-    2021-05-12
+    v 1.1
+    2021-05-17
     Lufthafen
   -->
   <div class="yo-form-page">
@@ -23,11 +23,35 @@
     </div>
 
     <!-- 表单主体 -->
-    <a-tabs type="card">
-      <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
-        <component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
-      </a-tab-pane>
-    </a-tabs>
+    <!-- 
+      挂载了一个content到tab后面
+      如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
+      现在只使用其tab卡片,重写了一个tab内容
+    -->
+    <div class="yo-tab-external-mount">
+      <a-tabs @change="onTabChange" type="card">
+        <template v-for="(tab, index) in tabs">
+          <a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane>
+        </template>
+      </a-tabs>
+      <div class="yo-tab-external-mount-content">
+        <template v-for="(tab, index) in tabs">
+          <div
+            :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
+            :key="index"
+            class="yo-tab-external-tabpane"
+          >
+            <component
+              :frame="self"
+              :is="tab.component"
+              :param="param"
+              ref="forms"
+              v-if="tab.component"
+            />
+          </div>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -41,6 +65,7 @@ export default {
          * {
          *    title: '标题',
          *    component: () => import('...'),
+         *    active: false,
          * }
          */
       ],
@@ -49,7 +74,8 @@ export default {
 
   methods: {
     async onSubmit() {
-      let formData = {};
+      let formData = {},
+        flag = true;
       for (let i = 0; i < this.$refs.forms.length; i++) {
         const form = this.$refs.forms[i];
         try {
@@ -59,14 +85,24 @@ export default {
             ...data,
           };
         } catch {
-          return;
+          flag = false;
         }
       }
 
+      if (!flag) {
+        return;
+      }
+
       /**
        * 对表单提交进行处理
        */
     },
+
+    onTabChange(key) {
+      this.tabs.forEach((p, i) => {
+        p.active = i === key;
+      });
+    },
   },
 };
 </script>