MultiSelect

MultiSelectは、コレクションから複数のアイテムを選択するために使用されます。

インポート # 


import MultiSelect from 'primevue/multiselect';

基本 #

MultiSelectは、`v-model`プロパティと`options`コレクションを使用して制御されたコンポーネントとして使用されます。オプションのラベルと値は、それぞれ`optionLabel`と`optionValue`プロパティで定義されます。オプションが文字列配列などの単純なプリミティブ値の場合、`optionLabel`と`optionValue`は不要です。

都市を選択

<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
    :maxSelectedLabels="3" class="w-full md:w-80" />

チップ #

デフォルトでは、選択された値はコンマ区切りのリストとして表示されます。`display`を`chip`に設定すると、チップとして表示されます。

都市を選択

<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
    :maxSelectedLabels="3" class="w-full md:w-80" />

グループ #

ネストされたデータ構造が提供されている場合、オプションをグループ化できます。グループのラベルを定義するには、`optionGroupLabel`プロパティが必要であり、グループの子を参照するプロパティを定義するには`optionGroupChildren`も必要です。

都市を選択

<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
    <template #optiongroup="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.label }}</div>
        </div>
    </template>
</MultiSelect>

テンプレート #

デフォルトでは、オプションのラベルがアイテムの表示テキストとして使用されます。カスタムコンテンツをサポートするには、オプションインスタンスをパラメーターとして取得する`option`テンプレートを定義します。さらに、`value`、`optiongroup`、`chip`、`header`、`footer`、`emptyfilter`、`empty`スロットが提供され、さらなるカスタマイズが可能です。

国を選択

<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
    <template #footer>
        <div class="py-2 px-4">
            <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
        </div>
    </template>
</MultiSelect>

フィルタ #

フィルタリングを使用すると、ヘッダーの入力フィールドを使用してリスト内のアイテムを検索できます。フィルタリングを使用するには、`filter`プロパティを有効にします。デフォルトでは、検索時にoptionLabelが使用され、`filterFields`を使用して使用されるフィールドをカスタマイズできます。さらに、`filterMatchMode`を使用して検索アルゴリズムを定義できます。有効な値は「contains」（デフォルト）、「startsWith」、および「endsWith」です。

都市を選択

<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
    :maxSelectedLabels="3" class="w-full md:w-80" />

読み込み状態 #

読み込み状態は`loading`プロパティを使用して使用できます。

読み込み中…

<MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>

VirtualScroll #

VirtualScrollerは、このデモでは10万件のレコードなど、長いオプションリストを効率的にレンダリングするために使用されます。設定は`virtualScrollerOptions`プロパティで行われ、使用されているため、利用可能なオプションの詳細についてはVirtualScrollerを参照してください。

アイテムを選択

<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />

フロートラベル #

フォーカスが当たると、入力フィールドの上にフロートラベルが表示されます。詳細については、FloatLabelのドキュメントを参照してください。

空

<FloatLabel class="w-full md:w-80">
    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
    <label for="ms-cities">MultiSelect</label>
</FloatLabel>

塗りつぶし #

`variant`プロパティを`filled`に指定すると、デフォルトの`outlined`スタイルよりも視覚的な強調表示が大きくなります。

都市を選択

<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
    :maxSelectedLabels="3" class="w-full md:w-80" />

無効 #

`invalid`プロパティを使用して無効状態を表示し、検証エラーを示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。

都市を選択

<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
    :maxSelectedLabels="3" :invalid="selectedCities === null"  class="w-full md:w-80" />

無効 #

`disabled`が存在する場合、要素は編集およびフォーカスできません。

都市を選択

<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />

アクセシビリティ #

スクリーンリーダー

コンポーネントの説明値は、`aria-labelledby`または`aria-label`プロパティで指定できます。Multiselectコンポーネントには、`aria-haspopup`および`aria-expanded`属性に加えて、`combobox`ロールがあります。コンボボックスとポップアップ間の関係は、ポップアップリストボックスのIDを参照する`aria-controls`属性で作成されます。

ポップアップリストボックスは、`aria-multiselectable`が有効になっている`listbox`をロールとして使用します。各リストアイテムには、`aria-label`、`aria-selected`、`aria-disabled`属性とともに`option`ロールがあります。

ヘッダーのチェックボックスコンポーネントは、内部的に非表示のネイティブチェックボックス要素を使用しており、スクリーンリーダーでのみ表示されます。読み取る値は、ロケールAPIの`aria`プロパティの`selectAll`と`unselectAll`キーで定義されます。

フィルタリングが有効になっている場合、`filterInputProps`を定義して、入力要素に`aria-*`プロパティを与えることができます。

閉じるボタンは、デフォルトでロケールAPIの`aria`プロパティの`close`キーを`aria-label`として使用します。これは`closeButtonProps`で上書きできます。


<span id="dd1"></span>Options</span>
<MultiSelect aria-labelledby="dd1" />

<MultiSelect aria-label="Options" />

閉じた状態のキーボードサポート

キー機能
tabフォーカスをMultiselect要素に移動します。
spaceポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合、最初のオプションがフォーカスを受け取ります。
enterポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合、最初のオプションがフォーカスを受け取ります。
下矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合、最初のオプションがフォーカスを受け取ります。
上矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合、最初のオプションがフォーカスを受け取ります。
任意の印刷可能な文字ポップアップを開き、ラベルが入力された文字で始まるオプションにフォーカスを移動します。選択されていない場合、最初のオプションがフォーカスを受け取ります。

ポップアップキーボードサポート

キー機能
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。存在しない場合、最初のフォーカス可能な要素がフォーカスを受け取ります。
`shift` + `tab`ポップアップ内の前のフォーカス可能な要素にフォーカスを移動します。存在しない場合、最後のフォーカス可能な要素がフォーカスを受け取ります。
enterフォーカスされたオプションの選択状態を切り替え、フォーカスをMultiselect要素に移動します。
spaceフォーカスされたオプションの選択状態を切り替え、フォーカスをMultiselect要素に移動します。
escapeポップアップを閉じ、フォーカスをMultiselect要素に移動します。
下矢印次のオプションにフォーカスを移動します。存在しない場合、視覚的なフォーカスは変わりません。
上矢印前のオプションにフォーカスを移動します。存在しない場合、視覚的なフォーカスは変わりません。
`alt` + `上矢印`フォーカスされたオプションを選択し、ポップアップを閉じ、フォーカスをMultiselect要素に移動します。
`shift` + `下矢印`次のオプションにフォーカスを移動し、選択状態を切り替えます。
`shift` + `上矢印`前のオプションにフォーカスを移動し、選択状態を切り替えます。
`shift` + `space`最後に選択されたオプションとフォーカスされたオプションの間のアイテムを選択します。
home最初のオプションにフォーカスを移動します。
end最後のオプションにフォーカスを移動します。
`control` + `shift` + `home`フォーカスされたオプションと最初のオプションまでのすべてのオプションを選択します。
`control` + `shift` + `end`フォーカスされたオプションと最後のオプションまでのすべてのオプションを選択します。
`control` + `a`すべてのオプションを選択します。
pageUp視覚的なフォーカスを最初のオプションにジャンプします。
pageDown視覚的なフォーカスを最後のオプションにジャンプします。
任意の印刷可能な文字ラベルが入力された文字で始まるオプションにフォーカスを移動します。

すべてのチェックボックスのキーボードサポートを切り替える

キー機能
spaceチェック状態を切り替えます。
escapeポップアップを閉じ、フォーカスをMultiselect要素に移動します。

フィルタ入力キーボードサポート

キー機能
下矢印次のオプションにフォーカスを移動します。存在しない場合、視覚的なフォーカスは変わりません。
上矢印前のオプションにフォーカスを移動します。存在しない場合、視覚的なフォーカスは変わりません。
左矢印現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字左に移動します。
右矢印現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字右に移動します。
home入力カーソルを最後に移動します。そうでない場合、最初のオプションにフォーカスを移動します。
end入力カーソルを最初に移動します。そうでない場合、最後のオプションにフォーカスを移動します。
enterポップアップを閉じ、フォーカスをMultiselect要素に移動します。
escapeポップアップを閉じ、フォーカスをMultiselect要素に移動します。
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。存在しない場合、フォーカス可能なオプションが選択され、オーバーレイが閉じられ、ページ内の次の要素にフォーカスが移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7PrimeTek