Implementierung der Validierung mehrerer Elemente im Formular

     const formName = ['tableForm1', 'tableForm2', 'tableForm3']
      const validiert = (Element) => {
        returniere neues Promise((lösen, ablehnen) => {
          wenn (!this.$refs[item]) {
            lösen()
            return false
          }
          dies.$refs[item].validate((valid) => {
            if (gültig) {
              lösen()
            } anders {
              reject(new Error('Die Überprüfung ist falsch'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validiert(item))).then(() => {
        console.log('Erfolg')
      }).catch(() => {
        console.log('fehlgeschlagen')
      })
    }
  }

  <div Klasse="Startseite">
    <el-form :model="tableForm1" ref="tableForm1" :rules="Regeln1" label-width="100px" >
      <el-form-item label="Preis" prop="Preis">
        <el-input v-model.number="tableForm1.price" autocomplete="aus"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" >
      <el-form-item label="Alter" prop="Alter">
        <el-input v-model.number="tableForm2.age" autocomplete="aus"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" >
      <el-form-item label="Name" prop="Name">
        <el-input v-model.number="tableForm3.name" autocomplete="aus"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitForm">Senden</el-button>
    <el-button @click="resetForm">Zurücksetzen</el-button>
    
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Home",
  Daten () {
    zurückkehren {
      Tabellenform1: {
        Preis: ''
      },
      Tabellenform2: {
        Alter: ''
      },
      Tabellenform3: {
        Name: ''
      },
      Regeln1: {
        Preis: [{ erforderlich: true, Nachricht: ‚Preis darf nicht leer sein‘, Auslöser: ‚Unschärfe‘ }]
      },
      Regeln2: {
        Alter: [{ erforderlich: wahr, Nachricht: ‚Alter darf nicht leer sein‘, Auslöser: ‚unscharf‘ }]
      },
      Regeln3: {
        Name: [{ erforderlich: true, Nachricht: ‚Name darf nicht leer sein‘, Auslöser: ‚unscharf‘ }]
      }
    }
  },
  Methoden: {
    Formular zurücksetzen () {
      dies.$refs.tableForm1.resetFields()
      dies.$refs.tableForm2.resetFields()
      dies.$refs.tableForm3.resetFields()
    },
    Formular absenden () {
      const formName = ['tableForm1', 'tableForm2', 'tableForm3']
      const validiert = (Element) => {
        returniere neues Promise((lösen, ablehnen) => {
          wenn (!this.$refs[item]) {
            lösen()
            return false
          }
          dies.$refs[item].validate((valid) => {
            if (gültig) {
              lösen()
            } anders {
              reject(new Error('Die Überprüfung ist falsch'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validiert(item))).then(() => {
        console.log('Erfolg')
      }).catch(() => {
        console.log('fehlgeschlagen')
      })
    }
  }
}
</Skript>