ElementUI implementiert die Funktionsschaltfläche zum Zurücksetzen des Formulars el-form

<el-form :inline="true" :model="queryParams" ref="queryForm">

 zurücksetzen(){
        # Setzt die Entity-Attribute des Anforderungsparameters zurück this.queryParams = {
          Mitgliedsname: nicht definiert,
          Typ-ID: nicht definiert,
        };
        #Geben Sie den Wert des Formularattributs zurück. $refs["form" ].resetFields();
      }

<Stil>
</Stil>
<Vorlage>
  <div>
    <el-col :span="19">
      <el-form :inline="true" :model="queryParams" ref="queryForm">
        <el-form-item label="Name">
          <el-input v-model="queryParams.memberName" Platzhalter="Name"></el-input>
        </el-form-item>
        <el-form-item>
          <div Stil="Textausrichtung: rechts">
            <!--Benutzerdefinierte searchHandler-Funktion-->
            <el-button type="primary" @click="searchHandler">Abfrage</el-button>
            <!---->
            <el-button type="primary" @click="reset">Zurücksetzen</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
    <p style="text-align: left; margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">Hinzufügen</el-button>
    </p>
    <el-Zeile>
      <el-Tabelle
        :data="Tabellendaten"
        Stil="Breite: 100%">
        <el-table-column
          v-for="(Daten, Index) im Tabellenkopf"
          :Schlüssel="Index"
          :prop="Daten.prop"
          :label="Daten.label"
          :min-width="Daten['min-width']"
          :align="Daten.align">
        </el-Tabellenspalte>
        <el-table-column
          prop="Mitgliedsgeschlecht"
          label="Geschlecht">
          <template slot-scope="scope">{{ scope.row.memberSex === 1 ? 'Sex' : 'Mitglied' }}</template>
        </el-Tabellenspalte>
        <el-table-column
          prop="MitgliedStatisch"
          label="Mitgliedsstatus">
          <template slot-scope="scope">{{ scope.row.memberStatic === 1 ? 'Normal' : 'Abnormal' }}</template>
        </el-Tabellenspalte>
        <el-table-column
          Bezeichnung = "Vorgang"
          Mindestbreite = "240">
          <template slot-scope="Umfang">
            <el-button type="primary" size="mini" @click="toEdit(scope)">Bearbeiten</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">Löschen</el-button>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
      <br>
      <el-pagination
        @size-change="Größenänderungsgriff"
        @current-change="AktuelleÄnderung handhaben"
        :aktuelle-seite="pagination.pageIndex"
        :Seitengrößen="[5, 10, 20, 30, 40]"
        :Seitengröße=Paginierung.Seitengröße
        Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
        :total=pagination.total>
      </el-pagination>
    </el-row>
 
    <el-dialog title="Student hinzufügen" :visible.sync="dialogFormAdd">
      <el-form :model="Mitglied">
        <el-form-item label="Name" >
          <el-input v-model="Mitglied.Mitgliedsname" auto-complete="aus"></el-input>
        </el-form-item>
 
      </el-form>
      <div slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">Abbrechen</el-button>
        <el-button type="primary" @click="add(student)">OK</el-button>
      </div>
    </el-dialog>
 
    <el-dialog title="Studenten ändern" :visible.sync="dialogFormEdit">
      <el-form :model="Mitglied">
        <el-form-item label="Name" >
          <el-input v-model="Mitglied.Mitgliedsname" auto-complete="aus"></el-input>
        </el-form-item>
      </el-form>
      <div slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">Abbrechen</el-button>
        <el-button type="primary" @click="edit(student)">OK</el-button>
      </div>
    </el-dialog>
 
  </div>
</Vorlage>
 
<Skript>
  Standard exportieren{
    Name: 'Mitglied',
    Daten () {
      zurückkehren {
        Tabellendaten: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        Mitglied: {
          Mitglieds-ID: '',
          Mitgliedsname: '',
          Mitgliedstelefon: '',
          Mitgliedsalter: '',
          Typname: '',
          nenberDate: '',
          MitgliedStatisch:'',
          Mitgliedsguthaben:'',
          Mitglied xufei:''
        },
        Abfrageparameter: {
          Mitgliedsname:'',
          Typ-ID: ''
        },
        Pagination:
          Seitenindex: 1,
          Seitengröße: 10,
          gesamt: 0,
        },
        Tabellenkopfzeile: [
          {
            Stütze: "Mitglieds-ID",
            Bezeichnung: 'Mitgliedsnummer',
            ausrichten: 'links'
          },
          {
            Eigenschaft: "Mitgliedsname",
            Bezeichnung: "Name",
            ausrichten: 'links'
          },
          {
            Stütze: 'memberPhone',
            Bezeichnung: 'Telefon',
            ausrichten: 'links'
          },
          {
            Eigenschaft: 'Mitgliedsalter',
            Bezeichnung: "Alter",
            ausrichten: 'links'
          },
          {
            Eigenschaft: „Mitgliedstypen.Typname“,
            Bezeichnung: 'Kartentyp',
            ausrichten: 'links'
          },
          {
            Eigenschaft: 'nenberDate',
            Bezeichnung: 'Eintrittsdatum',
            ausrichten: 'links'
          },
          {
            Stütze: "Mitgliederstand",
            Bezeichnung: „Mitgliederguthaben“,
            ausrichten: 'links'
          },
          {
            Stütze: 'memberxufei',
            Beschriftung: 'Ablaufdatum',
            ausrichten: 'links'
          }
        ]
      }
    },
    Methoden: {
      init () {
        var selbst = dies
        dies.$axios({
          Methode: 'post',
          url:'/Mitglied/Abfrage',
          Daten: {"Seitennummer": dieser.pagination.Seitenindex, "Seitengröße": diese.pagination.Seitengröße, "ktype": 0},
          Überschriften:{
            'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
          konsole.log(res);
          selbst.pagination.total = res.data.total;
          self.tableData = res.data.rows;
        })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
      },
      handleSizeChange(Wert) {
        this.pagination.pageSize = Wert;
        diese.pagination.pageIndex = 1;
        dies.init();
      },
      handleCurrentChange(Wert) {
        this.pagination.pageIndex = Wert;
        dies.init();
      },
      hinzufügen(Schüler) {
        dies.$axios({
          Methode: 'post',
          url:'/student/einfügen',
          Daten: {'Name': Student.Name, 'Geschlecht': Student.Geschlecht, 'Alter': Student.Alter, 'College': Student.College, 'Klassenname': Student.Klassenname},
          Überschriften:{
            'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
          this.$message.success('Erfolgreich hinzugefügt')
          this.dialogFormAdd = false
          dies.init()
        })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
      },
      toEdit (Umfang) {
        diese.student.sid = Umfang.Zeile.sid
        dieser.Studentenname = Umfang.Zeilenname
        dieser.Student.Geschlecht = Umfang.Zeile.Geschlecht
        this.student.age = Umfang.Zeile.Alter
        this.dialogFormEdit = true
      },
      bearbeiten (Student) {
        var Parameter = {
          'sid': student.sid,
          'Name': Name des Studenten,
          'Geschlecht': Student.Geschlecht,
          "Alter" : Studentenalter
        }
 
        dies.$axios({
          Methode: 'post',
          URL: „/student/update“,
          Daten:Parameter,
          Überschriften:{
            'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
          this.$message.success('Änderung erfolgreich')
          this.dialogFormEdit = false
          dies.init()
        }).catch(Funktion (Fehler) {
          console.log(Fehler)
        })
      },
      deleteMember (Bereich) {
        Debugger;
        wenn (!scope.row.memberId) {
          dies.tableData.splice(Umfang.$index, 1)
        } anders {
          this.$confirm('Bestätigen, ob gelöscht werden soll', 'Eingabeaufforderung', {
            confirmButtonText: 'Bestätigen',
            cancelButtonText: 'Abbrechen',
            Typ: "Warnung",
            Mitte: wahr
          })
            .then(() => {
              Konsole.log(Umfang.Zeile.Mitglieds-ID)
              dies.$axios.get('/menber/delete/' + scope.row.memberId).then(res => {
                this.$message.success('Erfolgreich gelöscht')
                dies.init()
              })
                .catch(Funktion (Fehler) {
                  console.log(Fehler)
                })
            })
            .fangen(() => {
              diese.$nachricht({
                Typ: "Info",
                Nachricht: ‚Gelöscht‘
              })
            })
        }
      },
      Suchhandler() {
        var selbst = dies
        dies.$axios({
          Methode: 'post',
          url:'/Mitglied/Abfrage',
          Daten: {"Seitennummer": this.pagination.pageIndex, "Seitengröße": this.pagination.pageSize, "ktype": 0, "hyname": this.queryParams.memberName},
          Überschriften:{
            'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
          konsole.log(res);
          selbst.pagination.total = res.data.total;
          self.tableData = res.data.rows;
        })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
      },
      zurücksetzen(){
        diese.queryParams = {
          Mitgliedsname: nicht definiert,
          Typ-ID: nicht definiert,
        };
        dies.$refs["form" ].resetFields();
      }
    },
    montiert: Funktion () {
      dies.init()
    }
  }
</Skript>