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

Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変更があります。ここではいくつかの重要なポイントを示します。

ここに画像の説明を挿入

コード構造:

書き方1（推奨）:

<スクリプト設定 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;
}
</スタイル>

書き方2：

<テンプレート>
  <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;
}
</スタイル>

違い：

書き方1は上からJS、HTML、CSSとなっており、Reactに似ておりロジックが明確です。
記述方法 1 は、これまでの Vue2 の記述方法と同様に、上から下へ、つまり HTML、JS、CSS の順です。
記述方法1の形式では、データ、メソッド、その他のコンテンツをエクスポートする必要がないため、コード量を節約できます。

要点:

1. Element Plusの公式サイトデモのコードにはpropがありません

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

データの応答性を実現するには、記述時に自分でバインドする必要があります。
2. el-formのrefを使用するにはElFormを導入する必要がある

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

これで、Vue3+Element+Ts を使って基本的なフォーム検索リセットやその他の機能を実装する方法についての説明は終わりです。Element Ts フォーム検索リセットに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: