## Cascader(カスケード) オプションが明確な階層構造になっている場合は、Cascader を使って表示したり選択したりすることができます。 ### 基本的な使い方子要素のオプション項目を拡張するには 2 つの方法があります。 :::demo オプションの配列に `options` 属性を代入すると、cascader をレンダリングします。`props.expandTrigger` 属性は、子オプションがどのように展開されるかを定義します。 ```html

クリックすると子オプションが展開される(デフォルト)

ホバーすると子のオプションが拡張される

``` ::: ### 無効化されたオプションオプションオブジェクトに `disabled` フィールドを設定することで、オプションを無効にします。 :::demo この例では、`options` 配列の最初の項目に `disabled: true` フィールドがあるので、無効になっています。デフォルトでは、Cascader は各オプションオブジェクトの `disabled` フィールドをチェックします。オプションが無効かどうかを示すために別のフィールド名を使用している場合は、`props.disabled` 属性にそれを割り当てることができます (詳細は以下の API テーブルを参照してください)。もちろん、フィールド名 `value`、`label`、`children` も同様にカスタマイズすることができます。 ```html ``` ::: ### クリア可能 `el-cascader` に `clearable` 属性を設定すると、選択してホバリングしたときにクリアアイコンが表示されるようになります。 :::demo ```html ``` ::: ### 最後のレベルのみ表示入力では、すべてのレベルを表示するのではなく、最後のレベルのみを表示することができます。 :::demo `show-all-levels` 属性は、すべてのレベルを表示するかどうかを定義する。`false` の場合、最後のレベルのみが表示される。 ```html ``` ::: ### 複数選択複数選択を使用するには `props.multiple = true` を設定する。 :::demo 複数選択の場合、デフォルトでは選択されたタグがすべて表示されます。選択したタグを折りたたむには、`collapse-tags = true` を設定することができます。 ```html

すべてのタグを表示する（デフォルト)

タグの折りたたみ

``` ::: ### オプションの任意のレベルを選択単一選択の場合はリーフノードのみをチェックし、複数選択の場合は親ノードをチェックすることで最終的にリーフノードをチェックします。この機能を有効にすると、親ノードと子ノードのリンクを解除することができ、任意のレベルのオプションを選択することができます。 :::demo `props.checkStrictly = true` を設定すると、チェックしたノードの状態が親ノードや子ノードに影響を与えないようにすることができ、任意のレベルのオプションを選択することができます。 ```html

任意のレベルのオプションを選択（単一選択)

任意のレベルのオプションを選択（複数選択)

``` ::: ### 動的ローディングノードをチェックすると、その子ノードを動的にロードします。 :::demo 動的ロードを利用するには `lazy = true` を設定し、`lazyload` でデータソースのロード方法を指定する必要があります。パラメータ `lazyload` には 2 つのパラメータがあり、最初のパラメータ `node` は現在クリックされているノード、`resolve` はロードが完了したことを示すコールバックで、これを呼び出す必要があります。ノードの状態をより正確に表示するには、それがリーフノードであるかどうかを示すために `leaf` フィールドを追加します ( `props.leaf` で変更可能)。そうでない場合は、子ノードがあるかどうかで推測されます。 ```html ``` ::: ### フィルタリング可能キーワードで検索してオプションを選択します。 :::demo `el-cascader` に `filterable` を追加することでフィルタリングが可能になる。cascader は、ラベルまたは親のラベル(`show-all-levels`による)に入力キーワードが含まれているノードにマッチするようになります。もちろん、`filter-method`で検索ロジックをカスタマイズすることもできます。 ```html

Filterable (Single selection)

Filterable (Multiple selection)

``` ::: ### カスタムオプションの内容 cascader ノードの内容をカスタマイズすることができます。 :::demo `scoped slot`によって、cascader の内容をカスタマイズすることができます。スコープ内の `node` と `data` にアクセスすることができます。 ```html ``` ::: ### cascader パネル `CascaderPanel` は `Cascader` のコアコンポーネントであり、単一選択、複数選択、動的読み込みなど様々な機能を持っています。 :::demo `el-cascader` と同様に、`options` で代替オプションを設定したり、`props` で他の機能を有効にしたりすることができます。 ```html ``` ::: ### Cascader 属性 | Attribute | Description | Type | Accepted Values | Default | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------- | ------- | | model-value / v-model | バインディング値 | - | — | — | | options | オプションのデータ、`Props`によって `value` と `label` のキーをカスタマイズすることができます。 | array | — | — | | props | 構成オプションについては、次の表を参照してください。 | object | — | — | | size | インプットサイズ | string | medium / small / mini | — | | placeholder | インプットプレースホルダ | string | — | Select | | disabled | cascader が無効化されているかどうか | boolean | — | false | | clearable | 選択値をクリアできるかどうか | boolean | — | false | | show-all-levels | 選択された値のすべてのレベルを入力に表示するかどうか | boolean | — | true | | collapse-tags | 複数選択モードでタグを折りたたむかどうか | boolean | - | false | | separator | オプションラベルセパレーター | string | — | ' / ' | | filterable | オプションを検索できるかどうか | boolean | — | — | | filter-method | 検索ロジックをカスタマイズ、最初のパラメータは `node`、2 番目のパラメータは `keyword` で、ヒットしたかどうかを示すブール値を返す必要があります。 | function(node, keyword) | - | - | | debounce | フィルタキーワードを入力したときのデバウンスの遅延時間をミリ秒単位で指定します。 | number | — | 300 | | before-filter | フック関数を用いてフィルタリングを行う場合、フィルタリングしたい値をパラメータとしてフィルタリングを行う前に `false` を返します。`false` が返されるか、`Promise` が返され、拒否された場合、フィルタリングは中止されます。 | function(value) | — | — | | popper-class | cascader ロップダウンのカスタムクラス名 | string | — | — | | popper-append-to-body | ポッパーメニューをボディに追加するかどうか。ポッパーの位置が間違っている場合は、このプロップを false に設定してみてください。 | boolean | - | true | ### Cascader イベント | Event Name | Description | Parameters | | -------------- | --------------------------------------------------------- | --------------------------------------------- | | change | バインディング値が変更された場合にトリガされます。 | value | | expand-change | 拡張オプションが変更された場合のトリガー | an array of the expanding node's parent nodes | | blur | cascader がぼやけたときにトリガー | (event: Event) | | focus | Cascader がフォーカスしたときにトリガー | (event: Event) | | visible-change | ドロップダウンが表示/非表示になったときにトリガされます。 | true when it appears, and false otherwise | | remove-tag | 複数選択モードでタグを削除した場合のトリガー | the value of the tag which is removed | ### Cascader メソッド | Method Name | Description | Parameters | | --------------- | ------------------------------------------ | ------------------------------------------------------------------------- | | getCheckedNodes | 現在選択されているノードの配列を取得します | (leafOnly) whether only return the leaf checked nodes, default is `false` | ### Cascader スロット | Slot Name | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------- | | - | cascader ノードのカスタムコンテンツ、パラメータは{ node, data }で、それぞれ現在のノードオブジェクトとノードデータです。 | | empty | マッチするオプションがない場合のコンテンツ | ### CascaderPanel の属性 | Attribute | Description | Type | Accepted Values | Default | | --------------------- | ------------------------------------------------------------------------------------------------- | ------ | --------------- | ------- | | model-value / v-model | バインディング値 | - | — | — | | options | オプションのデータは、`Props`によって `value` と `label` のキーをカスタマイズすることができます。 | array | — | — | | props | 構成オプションについては、Props の表を参照してください。 | object | — | — | ### CascaderPanel イベント | Event Name | Description | Parameters | | ------------- | -------------------------------------------------- | --------------------------------------------- | | change | バインディング値が変更されたときにトリガされます。 | value | | expand-change | 拡張オプションが変更された場合のトリガー | an array of the expanding node's parent nodes | ### CascaderPanel メソッド | Method Name | Description | Parameters | | ----------------- | ------------------------------------------ | ------------------------------------------------------------------------- | | getCheckedNodes | 現在選択されているノードの配列を取得します | (leafOnly) whether only return the leaf checked nodes, default is `false` | | clearCheckedNodes | チェック済みノードをクリア | - | ### CascaderPanel スロット | Slot Name | Description | | --------- | ---------------------------------------------------------------------------------- | | - | パラメータは{ node, data }で、それぞれ現在のノードオブジェクトとノードデータです。 | ### Props | Attribute | Description | Type | Accepted Values | Default | | ------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------- | ---------- | | expandTrigger | オプション拡大トリガモード | string | click / hover | 'click' | | multiple | 複数選択が可能かどうか | boolean | - | false | | checkStrictly | ノードの状態が親子ノードに影響しないかどうかをチェックする | boolean | - | false | | emitPath | チェックしたノードが変更された場合に、ノードのパスの配列を表示するかどうか、false の場合はノードの値のみを表示します。 | boolean | - | true | | lazy | 子ノードを動的にロードするかどうか、`lazyload` 属性と一緒に使用します。 | boolean | - | false | | lazyLoad | 子ノードデータ読み込みメソッド、メソッドは `lazy` が真の場合にのみ動作します。 | function(node, resolve) | - | - | | value | ノードオブジェクトのどのキーをノードの値として使用するかを指定します。 | string | — | 'value' | | label | ノードオブジェクトのどのキーをノードのラベルとして使用するかを指定します。 | string | — | 'label' | | children | ノードオブジェクトのどのキーをノードの子として使用するかを指定します。 | string | — | 'children' | | disabled | ノードオブジェクトのどのキーがノードの無効化されたキーとして使用されるかを指定します。 | string | — | 'disabled' | | leaf | ノードオブジェクトのどのキーをノードのリーフフィールドとして使用するかを指定します。 | string | — | 'leaf' |