el select v2

V2 仮想リスト セレクターを選択します

Vue 2 バージョンの Element UI に基づく仮想リスト セレクター コンポーネント。

オンラインデモ

オンラインデモ

使用説明書

npm i el-select-v2 npm i element-ui

  import Vue from 'vue' ;
// 必须引入 element-ui
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
import ElSelectV2 from 'el-select-v2' ;

Vue . use ( ElSelectV2 ) ; 

< template >
  < el-select-v2 v-model = " value " :options = " options " />
</ template >

< script >
  export default {
    data () {
      return {
        options : [],
        value : ' ' ,
      };
    },
    created () {
      for ( let i = 0 ; i < 10000 ; i ++ ) {
        this . options . push ({
          value : ` value ${ i + 1 } ` ,
          label : ` label ${ i + 1 } ` ,
        });
      }
    },
  };
</ script >

サンプルコード

サンプルコード

属性の選択

パラメータ	説明する	タイプ	オプションの値	デフォルト値
値/v-モデル	バインディング値	ブール値/文字列/数値	—	—
オプション	リストデータ	配列	—	—
値キー	値キー名	弦	—	価値
ラベルキー	ラベルキー名	弦	—	ラベル
オプションキー (1.4.6)	オプションキー名	弦	—	オプション
無効化キー (1.4.1)	無効なキー名	弦	—	無効
オブジェクトキー (1.4.0)	バインドされた値がオブジェクト型の場合のキー名	弦	—	価値
最小アイテムサイズ	各オプションの最小高さ	番号	—	34
複数	複数選択するかどうか	ブール値	—	間違い
無効	無効にするかどうか	ブール値	—	間違い
サイズ	入力ボックスのサイズ	弦	中型/小型/ミニ	—
クリア可能	オプションをクリアすることは可能ですか	ブール値	—	間違い
タグを折りたたむ	複数選択時に選択値をテキストとして表示するかどうか	ブール値	—	間違い
多重限界	複数選択する場合にユーザーが選択できる項目の最大数が 0 の場合、制限はありません。	番号	—	0
名前	選択入力の name 属性	弦	—	—
オートコンプリート	選択入力の autocomplete 属性	弦	—	オフ
プレースホルダー	プレースホルダー	弦	—	選択してください
フィルタリング可能	検索可能ですか?	ブール値	—	間違い
許可作成	ユーザーに新しいエントリの作成を許可するかどうかは、 filterableで使用する必要があります。	ブール値	—	間違い
フィルターメソッド	カスタム検索方法	関数	—	—
リモート	遠隔捜索かどうか	ブール値	—	間違い
リモート方式	遠隔検索方法	関数	—	—
読み込み中	データがリモートから取得されているかどうか	ブール値	—	間違い
ローディングテキスト	リモートロード中に表示されるテキスト	弦	—	読み込み中
一致しないテキスト	検索条件に一致しない場合に表示されるテキスト。slot slot="empty"設定も使用できます	弦	—	一致するデータがありません
データなしテキスト	オプションが空の場合に表示されるテキストは、 slot="empty"を使用して設定することもできます。	弦	—	データなし
ポッパークラス	ドロップダウンボックスのクラス名を選択します	弦	—	—
予約キーワード	複数選択して検索可能な場合、オプションを選択した後に現在の検索キーワードを保持するかどうか	ブール値	—	真実
デフォルトの最初のオプション	入力ボックスで Enter を押し、最初に一致したものを選択します。 filterableまたはremoteと併用する必要があります	ブール値	—	間違い
ポッパー-ボディに追加	ポップアップボックスをbody要素に挿入するかどうか。ポップアップ ボックスの位置に問題がある場合は、このプロパティを false に設定できます。	ブール値	—	真実
自動ドロップダウン	検索不可能な選択の場合、入力ボックスがフォーカスを取得した後にオプション メニューを自動的にポップアップするかどうか	ブール値	—	間違い
フィット入力幅 (1.1.0)	ドロップダウン ボックスの幅が入力ボックスと同じかどうかを false に設定すると、幅が自動的に計算され、パフォーマンスが低下します。	ブール値	—	真実

イベントの選択

イベント名	説明する	コールバックパラメータ
変化	選択した値が変化するとトリガーされます	現在選択されている値
目に見える変化	ドロップダウン ボックスが表示/非表示になったときにトリガーされます	表示される場合は true、非表示の場合は false
タグの削除	複数選択モードでタグが削除されるとトリガーされます	削除されたタグ値
クリア	ユーザーがクリア可能なラジオ モードでクリア ボタンをクリックするとトリガーされます。	—
ぼかし	入力がフォーカスを失ったときにトリガーされます	（イベント：イベント）
集中	入力がフォーカスを取得するとトリガーされます	（イベント：イベント）

スロットの選択

名前	説明する
—	カスタム テンプレート、パラメータは { item }
ヘッダー (1.3.0)	ドロップダウン リストの上部の内容
フッター (1.3.0)	ドロップダウン リストの下部にある内容
接頭語	コンポーネントヘッダーの内容を選択します
空の	オプションなしのリスト

オプション

パラメータ	説明する	タイプ	オプションの値	デフォルト値
価値	オプションの値	文字列/数値/オブジェクト	—	—
ラベル	オプションのラベルが設定されていない場合は、デフォルトでvalue	文字列/数値	—	—
オプション (1.2.0)	グループ化オプション	配列	—	—
無効	このオプションを無効にするかどうか	ブール値	—	間違い

メソッド

メソッド名	説明する	パラメータ
集中	入力にフォーカスを取得する	—
ぼかし	入力のフォーカスを失い、ドロップダウン ボックスを非表示にします。	—