So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI

// form1-Komponente <template>
    <el-form
      ref="Formular"
      :model="Formular"
      Beschriftungsbreite = "10px"
    >
      <el-form-item label="Name" prop="Name">
          <el-input v-model="formular.name" />
      </el-form-item>
    </el-form>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Form1',
    Requisiten: {
      bilden: {}
  },
  Daten() {
    zurückkehren {
      Regeln:
        Name: [
          { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihren Namen ein‘, Auslöser: ‚unscharf‘ }
        ]
      }
    }
  },
  Methoden: {
    // Hier wird die übergeordnete Komponente in einer Schleife durchlaufen, um die Validierung aufzurufen validForm() {
        let result = false
        this.$refs.form.validate(valid => gültig && (Ergebnis = wahr))
        Ergebnis zurückgeben
    }
    // Ich habe es hier anders geschrieben, aber es ist ein Promise-Objekt beim Loopen und Prüfen. Da gibt es ein Problem. Ich hoffe, die Großen können mir einen Rat geben. validForm() {
        // Die Ausgabestruktur hier ist offensichtlich ein Boolescher Wert, aber nach dem Aufruf der Schleife der übergeordneten Komponente ist es ein Promise-Typ, der konvertiert werden muss. return this.$refs.form.validate().catch(e => console.log(e))
    }
  }
}
</Skript>
 
// form2-Komponente <template>
    <el-form
      ref="Formular"
      :model="Formular"
      Beschriftungsbreite = "10px"
    >
      <el-form-item label="Alter" prop="Alter">
          <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Form2',
  Requisiten: {
      bilden: {}
  },
  Daten() {
    zurückkehren {
      Regeln:
        Name: [
          { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Alter ein‘, Auslöser: ‚unscharf‘ }
        ]
      }
    }
  },
  Methoden: {
    // Hier wird die übergeordnete Komponente in einer Schleife durchlaufen, um die Validierung aufzurufen validForm() {
        let result = false
        this.$refs.form.validate(valid => gültig && (Ergebnis = wahr))
        Ergebnis zurückgeben
    }
  }
}
</Skript>

// Übergeordnete Komponente <template>
    <div Klasse="übergeordnet">
        <form1 ref="form1" :form="formData.form1" />
        <form2 ref="form2" :form="formData.form2" />
        <el-button type="primary" @click="save">Fehler</el-button>
    </div>
</Vorlage>
<Skript>
... unter Weglassen der Referenz export default {
    Name: "Elternteil",
    ... Registrierungsdaten weglassen () {
        zurückkehren {
            formData: {
                form1: {},
                form2: {}
            }
        }
    },
}
</Skript>

Methoden: {
    speichern () {
        //Der Schlüsselwert jedes Formularobjekts, d. h. der Referenzwert jedes Formulars const formKeys = Object.keys(this.formData)
        // Führen Sie die Validierungsmethode für jedes Formular aus const valids = formKeys.map(item => this.$refs[item].validForm())
        // Logik, nachdem alle Formulare die Validierung bestanden haben, if (valids.every(item => item)) {
          konsole.log(11)
        }
    }
}

Standard exportieren {
  Requisiten: {
    bilden: {
      erforderlich: wahr,
      Typ: Objekt,
      Standard: () => {}
    },
  },
  Methoden: {
    gültigeForm () {
      let result = false
      this.$refs.form.validate(valid => gültig && (Ergebnis = wahr))
      Ergebnis zurückgeben
    }
  }
}