Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します

<スクリプト設定 lang="ts">
'vue' から { ref, reactive } をインポートします
'element-plus' から { ElForm } 型をインポートします
const myform = ref<InstanceType<typeof ElForm>>()
const フォームデータ = リアクティブ({
  名前： ''、
  主題： ''、
  学年： ''
})
// 検索 const submitForm = () => {
  const { 名前、科目、学年 } = formData
  console.log(名前、科目、学年)
}
// リセット const submitReset = () => {
  myform.value?.resetFields()
}
</スクリプト>

<テンプレート>
  <div class="mysearch">
    <el-form :model="formData" label-width="80px" ref="myform">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="名前" prop="名前">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="件名" prop="件名">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="グレード" prop="グレード">
            <el-select v-model="formData.grade" placeholder="選択してください">
              <el-option label="グレード 1" value="上海"></el-option>
              <el-option label="グレード 2" value="北京"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button type="primary" size="medium" @click="送信フォーム">
            クエリ</el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="medium" @click="送信リセット">
            リセット</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</テンプレート>

<style スコープ lang="less">
.mysearch{
  パディング: 20px;
}
</スタイル>

<テンプレート>
  <div class="mysearch">
    <el-form ref="myform" :model="formData" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="名前" prop="名前">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="件名" prop="件名">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="グレード" prop="グレード">
            <el-select v-model="formData.grade" placeholder="選択してください">
              <el-option label="グレード 1" value="上海"></el-option>
              <el-option label="グレード 2" value="北京"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button type="primary" size="medium" @click="送信フォーム"
            >クエリ</el-button
          >
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="medium" @click="送信リセット"
            >リセット</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent、reactive、ref} をインポートします。
'element-plus' から { ElForm } をインポートします

エクスポートデフォルトdefineComponent({
  設定（） {
    const フォームデータ = リアクティブ({
      名前： ''、
      主題： ''、
      学年： ''
    })
    const myform = ref<InstanceType<typeof ElForm>>()
    // 検索 const submitForm = () => {
      const { 名前、科目、学年 } = formData
      console.log(名前、科目、学年)
    }
    // リセット const submitReset = () => {
      myform.value?.resetFields()
    }
    戻る {
      フォームデータ、
      マイフォーム、
      送信フォーム、
      送信リセット
    }
  }
})
</スクリプト>

<style スコープ lang="less">
.mysearch{
  パディング: 20px;
}
</スタイル>

  <el-form-item label="アクティビティ名">
      <el-input v-model="フォーム名"></el-input>
    </el-form-item>

'element-plus' から { ElForm } をインポートします
const myform = ref<InstanceType<typeof ElForm>>()