Vue3 Element Plus el-formフォームコンポーネントの使い方-Vue.js-php.cn

Vue3 Element Plus el-formフォームコンポーネントの使い方

王林

リリース： 2023-05-12 20:04:04

転載

3280 人が閲覧しました

Element Plus の el-form は、ユーザーがデータを入力して送信するためのフォームを作成するために使用されるフォームコンポーネントです。フォームの検証を容易にするために、多くの組み込みの検証ルールと検証メソッドが提供されます。

el-form コンポーネントを使用すると、フォームコントロールをまとめて整理し、フォームを検証して、送信されたデータが期待される形式と要件を満たしていることを確認できます。このコンポーネントには次の機能があります。

組み込みの検証ルールとカスタム検証関数をサポートします。
model 属性を設定することで、フォームデータをフォームコンポーネントにバインドできます。
フォーム検証の前後のコールバック関数をサポートします。
入力ボックス、ドロップダウンボックス、ラジオボタン、チェックボックスなど、いくつかの一般的なフォームコントロールを提供します。

機能と使用法という点では、el-form コンポーネントは Element Plus と ElementUI に似ていますが、細部にいくつかの変更があります。

以下は、Element Plus および ElementUI の el-form コンポーネントに対するいくつかの大きな変更です:

導入方法: ElementUI は を使用します。 Vue。(ElementUI) を使用してコンポーネントを導入しますが、Element Plus は import を使用してコンポーネントをインポートします。たとえば、Vue 3 で Element Plus を使用するには、次のように el-form コンポーネントをインポートする必要があります:

import { ElForm } from &#39;element-plus&#39;

ログイン後にコピー

スタイル: Element Plus は、新しい ElementUI のデフォルトのテーマとスタイルを使用します。ElementUI のデフォルトのテーマとスタイルは異なります。 Element Plus が提供するテーマスタイルを使用することも、テーマスタイルをカスタマイズすることもできます。
フォーム検証: Element Plus では、フォーム検証は this.$refs.form.validate() メソッドを通じて実行されます。 ElementUI では、フォーム検証は this.$refs.form.validate((valid) => {}) メソッドを通じて実行されます。これは、Element Plus ではフォーム検証コールバック関数がオプションのパラメーターであるためです。
フォームコントロール: TimePicker、DatePicker、TreeSelect## など、いくつかの新しいフォームコントロールが Element Plus に追加されました。＃待って。 ElementUI では、これらのフォームコントロールは、el-date-picker、el-time-picker、el-cascader およびその他のコンポーネントで提供されます。
翻訳: Element Plus はより多くの言語翻訳をサポートし、翻訳オブジェクトをカスタマイズすることでより多くの言語をサポートできます。 ElementUI では、デフォルトの言語翻訳といくつかの言語パックのみが利用可能です。

つまり、Element Plus は ElementUI のアップグレードバージョンであり、より多くのフォームコントロールと機能を提供するとともに、いくつかの詳細とスタイルも改善されています。この 2 つの間にはいくつかの変更点がありますが、ElementUI の

el-form コンポーネントにすでに慣れている場合は、Element Plus の使用にすぐに慣れることができます。

el-form は、Element Plus のフォームコンポーネントです。el-form の一般的に使用されるプロパティとメソッドは次のとおりです:

Common property

model: フォームデータオブジェクトをバインドするために使用されます。v-model を使用してフォーム要素にバインドできます。たとえば、 のようになります。
rules: フォーム検証ルールを設定するために使用されます。 Rules は、各オブジェクトが検証ルールを表す配列です。たとえば、ルール: { ユーザー名: [ { 必須: true、メッセージ: 'ユーザー名を入力してください'、トリガー: 'ぼかし' } ] }。
label-width: フォーム要素のラベル幅を設定するために使用されます。
label-position: フォーム要素のラベルの位置を設定するために使用されます。オプションの値は 'right'、 '左'、'上'、'下'。
#inline: インラインフォームかどうかを設定するために使用されます。
disabled: フォームを無効にするかどうかを設定します。

一般的なメソッド

validate: フォーム検証をトリガーするために使用されます。検証が成功した場合は、コールバック関数を実行します。 true を渡します。それ以外の場合は false が渡されます。たとえば、formRef.value.validate((valid) => { if (valid) { // フォーム検証が成功しました } else { // フォーム検証が失敗しました } })。
resetFields: フォームデータと検証ステータスをリセットするために使用されます。
clearValidate: フォーム検証ステータスをクリアするために使用されます。
validateField: 指定されたフォーム要素の検証をトリガーするために使用されます。たとえば、formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // 検証が失敗しました } else { // 検証が成功しました } })。
submit：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。例如，formRef.value.submit((formData) => { // 表单提交成功 }, (error) => { // 表单提交失败 })。

这些是 el-form 常用的属性和方法，当然，还有其他属性和方法可以在需要时使用。在 Element Plus 的官方文档中，您可以找到更详细的文档和示例。

下面是一个简单的 el-form 示例，包括一个输入框和一个提交按钮：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="Username" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from &#39;vue&#39;
import { ElForm, ElFormItem, ElInput, ElButton } from &#39;element-plus&#39;

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const formData = ref({
      username: &#39;&#39;,
    })

    const rules = ref({
      username: [
        { required: true, message: &#39;Username is required&#39;, trigger: &#39;blur&#39; },
        { min: 3, max: 16, message: &#39;Length should be between 3 and 16&#39;, trigger: &#39;blur&#39; }
      ]
    })

    const submitForm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          // Submit form data
        } else {
          console.log(&#39;Validation failed&#39;)
          return false
        }
      })
    }

    const formRef = ref(null)

    return {
      formData,
      rules,
      submitForm,
      formRef,
    }
  }
}
</script>

ログイン後にコピー

以上がVue3 Element Plus el-formフォームコンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。