表单v-if控制的tab显示后新增表单项的校验触发方式更改

src/mixin/commonProcess.js

@@ -21,7 +21,7 @@ export default {
   },
   mounted() {
     if (!this.isInDisplay) {
-      this.ruleCheck()
+      this.generateFormRules()
     }
   },
   methods: {
@@ -29,7 +29,16 @@ export default {
      * 表单校验 rules 的赋值
      * @returns void
      */
-    ruleCheck() {
+    generateFormRules() {
+      if (this.root) {
+        if (!this.root.rules) {
+          return;
+        } else {
+          // 新添加的表单项，需要重新确定下 validator 的触发 trigger
+          this.updateRulesTrigger();
+          return
+        }
+      }
       if (!this.pattern)
         return
       // const keySet = new Set(Object.keys(this.pattern).concat(Object.keys(this.checkRules).concat(Object.keys(this.defaultRules))))
@@ -76,7 +85,8 @@ export default {
      * @returns 
      */
     getTriggerType(prop) {
-      const fields = this.$refs.modelForm.fields;
+      const modelForm = this.root ? this.root.$refs.modelForm : this.$refs.modelForm
+      const fields = modelForm.fields;
       for (let i = 0; i < fields.length; i++) {
         const field = fields[i];
         if (field.prop === prop) {
@@ -90,6 +100,24 @@ export default {
       return "blur";
     },
     /**
+     * 表单有些 tab 是通过 v-if 控制的，这些表单项初始时的 trigger 均为 blur，需要手动更新
+     */
+    updateRulesTrigger() {
+      const rules = this.root.rules
+      for (const key in rules) {
+        if (Object.hasOwnProperty.call(rules, key)) {
+          const rule = rules[key];
+          const triggerType = this.getTriggerType(key)
+          for (let i = 0; i < rule.length; i++) {
+            const r = rule[i];
+            if (r.validator && r.trigger !== triggerType) {
+              r.trigger = triggerType;
+            }
+          }
+        }
+      }
+    },
+    /**
      * Tabs切换事件
      * @param {VM} tab  
      */