要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキストボックスクラス、選択クラス、その他のクラスに分類します。

テキストボックスクラス
クラスを選択
その他のカテゴリー

要約

時間セレクターの場合、入力ボックスの表示スタイルと値の形式を設定できます。属性は format と value-format です。
ラジオボタンとチェックボックスの場合、選択されたアイテム属性のラベル値はモデルの値になります。
チェックボックス、複数選択の場合は、必ずモデル値を配列に設定してください

テキストボックスクラス

ここではテキストボックスを含む要素をまとめます。主なものは、通常のテキストボックス、パスワードボックス、テキストフィールド、カウンター、日付ピッカー、自動入力テキストボックス、プレフィックス付きテキストボックスです。

通常のテキストボックス: disabled は無効、clearable はクリア可能、maxlength/minlength 文字長、show-word-limit は単語数を表示、prefix-icon/suffix-icon は先頭と末尾にアイコンを表示、size は入力ボックスのサイズ (大、小、ミニ) を指定します。

<el-input v-model="xx" placeholder="コンテンツを入力してください" disabled clearable maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">

パスワードボックス: show-password が必要です

<el-input show-password v-model="xx" placeholder="内容を入力してください" >

テキスト領域: type="textarea" を指定する必要があります。rows で高さを制御します (数値であるため、: で追加する必要があることに注意してください)。autosize では、コンテンツに応じて高さが自動的に調整されます (行の最小数と最大数も設定できます)。

<el-inut type="textarea" v-model="xx" :rows="2" 自動サイズ設定>

カウンター: 標準の数値のみが許可され、数値の便利な加算と減算、min/max は最大値と最小値を制御し、steps はステップの長さを制御します。

<el-input-number v-model="num" :min="1" :max="10" :steps="2"></el-input-number>

複合入力ボックス: 要素は前または後に配置できます (スロット)

  <el-input placeholder="コンテンツを入力してください" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="追加" icon="el-icon-search"></el-button>
  </el-input>

入力候補のある入力ボックス。より複雑な場合は、el-autocomplete を参照してください。

日付ピッカーは少し複雑なので、別のセクションで説明します。

日付と時刻の選択

ここで特に強調したいのは、入力ボックスに表示される形式 (format) とバインドされた値の形式 (value-format) を制御できるということです。！！！
ここで特に強調したいのは、入力ボックスに表示される形式 (format) とバインドされた値の形式 (value-format) を制御できるということです。！！！
ここで特に強調したいのは、入力ボックスに表示される形式 (format) とバインドされた値の形式 (value-format) を制御できるということです。！！！
年は yyyy、月は MM、日は dd、時は HH、分は mm、秒は ss、週は WW (週セレクターのみ) です。よく使われるのは yyyy-MM-dd HH:mm:ss です。

落とし穴に注意してください:

年を除いて、すべての数字は 1 桁になります。1 桁の数字を 1 桁で表す場合は、0 は追加されません。
HH は 24 時間形式、hh は 12 時間形式です。！！！
値の形式には特別なタイムスタンプ型があり、形式には型A（AM/PM）があります。
値の形式が設定されていない場合、デフォルトは Fri Oct 18 2019 11:27:54 GMT+0800 (中国標準時) で、通常は 13 桁のタイムスタンプに設定されます。
開始選択と終了選択の値は配列です

選択できるタイプは次のとおりです。

時間セレクター: picker-options は選択範囲を設定します。

<el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="時間を選択">

開始および終了時間セレクター: is-range 属性、align 配置、range-separator セパレーター (デフォルトは -)、start-placeholder および end-placeholder が必要です。

<el-time-picker is-range v-model="value1" align="center" range-separator="to" start-placeholder="開始時刻" end-placeholder="終了時刻"></el-time-picker>

日付セレクター: タイプは必須、コントロールタイプ (日付、週、月、年、日付)

<el-date-picker type="date" v-model="value1" placeholder="日付を選択"> </el-date-picker>

開始日と終了日のセレクター: 必須タイプ、制御タイプ (日付範囲、週範囲、月範囲、年範囲)

<el-date-picker v-model="value1" type="daterange" range-separator="to" start-placeholder="開始日" end-placeholder="終了日"> </el-date-picker>

日付時刻ピッカー: type="datetime" である必要があります

<el-date-picker type="datetime" v-model="value1" placeholder="日付と時刻を選択"> </el-date-picker>

開始日時と終了日時セレクター: type="datetimerange" である必要があります。default-time はデフォルトの時間を設定できます。

<el-date-picker type="datetimerange" v-model="value1" range-separator="to" start-placeholder="開始日" end-placeholder="終了日"> </el-date-picker>

クラスを選択

すべての選択フォーム要素には、オプションに似たオプションがあります。モデルの値はオプション内の属性値にリンクされていることに注意してください。
オプションの基本的な統一パターンは {label:'表示される内容', value:'背景に送信される値'} ですが、ラジオボタンとチェックボックスは非常に奇妙で、ラベルオプションは実際には値であるため、記述する際には特に注意してください。！！

ラジオボタン: モデルにバインドされた値は、選択した項目のラベル値です。モデル値は既定の項目です。未定義の場合、既定の項目はありません。境界線には境界線があります。ボタンスタイルに変更したい場合は、el-radio-buttonを使用します。

  <!-- options: [{ value:1, label: 'ゴールデンケーキ' }, { value:1, label: 'ダブルスキンミルク' }] -->
  <el-radio-group v-model="ラジオ">
    <el-radio v-for="オプション内の項目" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
  </el-ラジオグループ>

チェックボックス: モデル値には、ブール値と配列の 2 つのタイプがあります。ブール値の場合、すべてのオプションがチェックされているかどうかを意味します。配列の場合、選択した項目のラベル値が配列に表示されます。 indeterminate が true の場合、部分選択を示し、すべてを選択する効果を実現するために使用されます。国境は国境である
el-checkbox-groupタグ、minとmaxはチェックされた項目の数を示し、sizeはサイズ、el-checkbox-buttonはボタンのフォームを示します。

<el-checkbox v-model="checked" indeterminate>すべて選択</el-checkbox>
  <el-チェックボックスグループ v-model="チェックリスト">
    <!-- options: [{ value:1, label: 'ゴールデンケーキ' }, { value:1, label: 'ダブルスキンミルク' }] -->
    <el-checkbox v-for="オプション内の項目" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
  </el-チェックボックスグループ>

ドロップダウンボックス: モデルの値は、選択したオプションの値です。無効な設定は選択できません。グループ化が必要な場合は、el-option-groupを使用します。エントリのリモート検索と作成については、公式ウェブサイトを参照してください。
el-select は、clearable でクリア、multiple で複数のオプションを選択（複数のオプションを選択する場合は、値は配列である必要があります）、filterable でオプションを検索できます。
el-optionを設定できます: スロットはカスタムスタイルを設定します

  <!-- options: [{ value:1, label: 'ゴールデンケーキ' }, { value:1, label: 'ダブルスキンミルク' }] -->
  <el-select v-model="value" placeholder="選択してください">
    <el-option v-for="オプション内の項目" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  </el-select>

カスケードドロップダウンボックス: モデルは配列であり、インデックスはレベルに対応します。オプションは再帰モード（[{value:1,label:'bj',children:[{value:2,label:'haidian'}]}]）に似ており、デフォルトのトリガーはクリックですが、ホバーすることもできます：props={expandTrigger:'hover'}

<el-cascader v-model="値" :options="オプション" @change="変更ハンドル"></el-cascader>

その他のカテゴリー

スイッチ: モデル値はブール値です。active-color 属性と inactive-color 属性を使用して、スイッチの背景色を設定できます。

<el-switch v-model="値" アクティブカラー="#13ce66" 非アクティブカラー="#ff4949"> </el-switch>

スライダー: デフォルトは0〜100ですが、formatTooltipを使用して表示される値をフォーマットできます。

<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

評価、カラー、シャトルフレーム、役に立たない、使ったら話します〜〜

アップロード: かなり複雑なので、ここでは私が知っていることだけをリストします。 accept はアップロードされるファイルの形式を制限し、auto-upload は自動的にアップロードするかどうかを制限し、アップロード数を制限し、file-list はファイルのリストを表示し、list-type は方法を表示し、on-exceed はファイル数を超過し、on-change はファイルを変更し、on-remove はファイルを削除します。フックのデフォルトのパラメータは、主にファイルとファイルリストです。

編集状態では直接的な画像リンクが存在する必要があるため、ファイルリストは通常、computed を使用して計算する必要があります。
最初のファイルは、これを介してアップロードできます。$refs.eventImage.uploadFiles[0].raw
検証時にファイルの値が存在するかどうかを正確に判断できない場合があり、アップロードのたびに手動でルールを設定する必要があります。同じ画像をアップロードすると機能しないというバグを修正するには、アップロードするたびに this.$refs[ref name].value = '' を設定する必要があります。

<el-upload ref="eventImage" accept="image/*" :auto-upload="false" action="" :limit="1" :file-list="fileListUploaded" list-type="picture-card" :on-exceed="exceedFile" :on-change="changeFile" :on-remove="removeImage" ></el-upload>

エレメントフォームのエレメントの使い方のまとめは以上です。エレメントフォームに関するより詳しい内容は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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