Vue3+Element+Ts implementiert grundlegende Such-Resets und andere Funktionen des Formulars

<script setup lang="ts">
importiere { ref, reaktiv } von 'vue'
Importtyp { ElForm } von 'element-plus'
const myform = ref<Instanztyp<Typ von ElForm>>()
const formData = reaktiv({
  Name: '',
  Thema: '',
  Grad: ''
})
// Suchen const submitForm = () => {
  const { Name, Fach, Note } = formData
  console.log(Name, Fach, Note)
}
// Zurücksetzen const submitReset = () => {
  meinform.value?.resetFields()
}
</Skript>

<Vorlage>
  <div Klasse="meineSuche">
    <el-form :model="formData" label-width="80px" ref="myform">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="Name" prop="Name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Betreff" prop="Betreff">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Klasse" prop="Klasse">
            <el-select v-model="formData.grade" Platzhalter="Bitte auswählen">
              <el-option label="Klasse 1" value="shanghai"></el-option>
              <el-option label="Klasse 2" value="peking"></el-option>
            </el-Auswahl>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button Typ="primär" Größe="mittel" @click="Formular abschicken">
            Abfrage</el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button Typ="primär" Größe="mittel" @click="submitReset">
            Zurücksetzen</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</Vorlage>

<style scoped lang="weniger">
.meinesuche {
  Polsterung: 20px;
}
</Stil>

<Vorlage>
  <div Klasse="meineSuche">
    <el-form ref="meineForm" :model="formData" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="Name" prop="Name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Betreff" prop="Betreff">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Klasse" prop="Klasse">
            <el-select v-model="formData.grade" Platzhalter="Bitte auswählen">
              <el-option label="Klasse 1" value="shanghai"></el-option>
              <el-option label="Klasse 2" value="peking"></el-option>
            </el-Auswahl>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button Typ="primär" Größe="mittel" @click="Formular absenden"
            >Abfrage</el-button
          >
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button Typ="primär" Größe="mittel" @click="submitReset"
            >Zurücksetzen</el-Schaltfläche
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, reaktiv, ref } von 'vue'
importiere { ElForm } von 'element-plus'

exportiere StandarddefiniereKomponente({
  aufstellen() {
    const formData = reaktiv({
      Name: '',
      Thema: '',
      Grad: ''
    })
    const myform = ref<Instanztyp<Typ von ElForm>>()
    // Suchen const submitForm = () => {
      const { Name, Fach, Note } = formData
      console.log(Name, Fach, Note)
    }
    // Zurücksetzen const submitReset = () => {
      meinform.value?.resetFields()
    }
    zurückkehren {
      formData,
      meinFormular,
      Formular absenden,
      absendenZurücksetzen
    }
  }
})
</Skript>

<style scoped lang="weniger">
.meinesuche {
  Polsterung: 20px;
}
</Stil>

  <el-form-item label="Aktivitätsname">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

importiere { ElForm } von 'element-plus'
const myform = ref<Instanztyp<Typ von ElForm>>()