## Cascader Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner. ### Basic usage Il y a deux manières d'étendres les options enfants. :::demo Assigner l'attribut `options` à un tableau d'options fournit un composant Cascader. L'attribut `props.expandTrigger` définit comment les options enfants sont étendues. ```html
Les options enfants se développent lorsque vous cliquez dessus (par défaut)
Les options enfants se développent lorsqu'elles sont survolées
``` ::: ### Disabled option Désactivez une option en définissant un champ `disabled` dans l'objet d'option. :::demo Dans cet exemple, le premier élément du tableau `options` a un champ` disabled: true`, il est donc désactivé. Par défaut, Cascader vérifie le champ `disabled` dans chaque objet option. Si vous utilisez un autre nom de champ pour indiquer si une option est désactivée, vous pouvez l'affecter dans l'attribut `props.disabled` (voir le tableau des API ci-dessous pour plus de détails). Et bien sûr, les noms de champs `value`,` label` et `children` peuvent également être personnalisés de la même manière. ```html ``` ::: ### Clearable Définissez l'attribut `clearable` pour` el-cascader` et une icône claire apparaîtra une fois sélectionnée et survolée :::demo ```html ``` ::: ### Display only the last level L'entrée peut afficher uniquement le dernier niveau au lieu de tous les niveaux. :::demo L'attribut `show-all-levels` définit si tous les niveaux sont affichés. S'il est `false`, seul le dernier niveau est affiché. ```html ``` ::: ### Multiple Selection Définissez `props.multiple = true` pour utiliser la sélection multiple. :::demo Lors de l'utilisation de la sélection multiple, toutes les balises sélectionnées seront affichées par défaut. Vous pouvez définir `collapse-tags = true` pour replier les balises sélectionnées. ```html
Afficher toutes les balises (par défaut)
Réduire les balises
``` ::: ### Select any level of options Dans la sélection simple, seuls les noeuds terminaux peuvent être coché, et dans la sélection multiple, coché les noeuds parents cochera les noeuds terminaux. Lorsque cette fonctionnalité est activée, les noeuds parents et enfants peuvent être dissociés et vous pouvez sélectionner n’importe quel niveau d’options. :::demo Définissez `props.checkStrictly = true` pour que l'état vérifié d'un noeud n'affecte pas ses noeuds parents et ses noeuds enfants. Vous pouvez ensuite sélectionner n'importe quel niveau d'options. ```html
Sélectionnez n'importe quel niveau d'options (Sélection unique)
Sélectionnez n'importe quel niveau d'options (sélection multiple)
``` ::: ### Dynamic loading Charge dynamiquement ses noeuds enfants lorsque un noeud est sélectionné. :::demo Définissez `lazy = true` pour utiliser le chargement dynamique. Vous devez Spécifier comment charger la source de données avec` lazyload`. Il existe deux paramètres de `lazyload`, le premier paramètre` node` est le noeud sur lequel l'utilisateur a cliqué, et `resolution` est un callback indiquant que le chargement est terminé et qu'il doit être appelé. Pour afficher le statut du noeud plus précisément, vous pouvez ajouter un champ `leaf` (modifiable par` props.leaf`) pour indiquer s'il s'agit d'un noeud feuille. Sinon, il sera déduit par ses noeuds enfants. ```html ``` ::: ### Filterable Rechercher et sélectionner des options avec un mot clé. :::demo Ajouter `filterable` à` el-cascader` permet le filtrage. Cascader recherchera les noeuds dont l'étiquette ou l'étiquette du parent (selon `show-all-levels`) inclut le mot-clé input. Bien sûr, vous pouvez personnaliser la logique de recherche en utilisant `filter-method` qui accepte une fonction, le premier paramètre est `node`, le second est `keyword` et doit renvoyer une valeur booléenne indiquant si le résultat est positif. ```html
Filtrable (Sélection unique)
Filtrable (Sélection multiple)
``` ::: ### Custom option content Vous pouvez personnaliser le contenu du noeud cascader. :::demo Vous pouvez personnaliser le contenu du noeud cascader avec `scoped slot`. Vous aurez accès à `node` et` data` dans la portée, correspondant respectivement à l'objet Node et aux données de noeud du noeud actuel. ```html ``` ::: ### Cascader panel `CascaderPanel` est le composant principal de` Cascader`. Il comporte diverses fonctionnalités telles que la sélection unique, la sélection multiple, le chargement dynamique, etc. :::demo Tout comme `el-cascader`, vous pouvez définir des options alternatives par `options`, et activer d'autres fonctionnalités par `props`, voir le formulaire d'API ci-dessous pour plus de détails. ```html ``` ::: ### Cascader Attributs | Attribut | Description | Type | Valeurs acceptées | Défaut | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------- | ------ | | model-value / v-model | Valeur de liaison | - | — | — | | options | Les données des options，la clé de `value` et `label` peuvent être personnalisées par `Props`. | array | — | — | | props | Options de configuration, voir le tableau suivant. | object | — | — | | size | Taille de l'entrée | string | medium / small / mini | — | | placeholder | Placeholder de l'input | string | — | Select | | disabled | Si Cascader est désactivé | boolean | — | false | | clearable | Si la valeur sélectionnée peut être effacée | boolean | — | false | | show-all-levels | Afficher ou non tous les niveaux de la valeur sélectionnée dans l'entrée | boolean | — | true | | collapse-tags | Réduire ou non les balises en mode de sélection multiple | boolean | - | false | | separator | Option label separator | string | — | ' / ' | | filterable | Si les options peuvent être recherchées | boolean | — | — | | filter-method | Personnaliser la logique de recherche, le premier paramètre est `node`, le second est `keyword`, et doit renvoyer une valeur booléenne indiquant si le résultat est positif. | function(node, keyword) | - | - | | debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 | | before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — | | popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader | string | — | — | | popper-append-to-body | Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true | ### Cascader Events | Event Name | Description | Paramètres | | -------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | | change | Se déclenche lorsque la valeur de liaison change | value | | expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes | | blur | Se déclenche lorsque Cascader blurs | (event: Event) | | focus | Se déclenche lorsque Cascader à le focus | (event: Event) | | visible-change | Se déclenche lorsque le menu déroulant apparaît / disparaît | vrai quand il apparaît, et faux sinon | | remove-tag | Se déclenche lors de la suppression d'une balise en mode de sélection multiple | la valeur de la balise qui est supprimée | ### Cascader Methods | Method Name | Description | Parameters | | --------------- | --------------------------------------- | ------------------------------------------------------------------------- | | getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` | ### Cascader Slots | Slot Name | Description | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. | | empty | Contenu quand il n'y a pas d'options correspondantes. | ### CascaderPanel Attributes | Attribut | Description | Type | Valeurs acceptées | Défaut | | --------------------- | ---------------------------------------------------------------------------------------------- | ------ | ----------------- | ------ | | model-value / v-model | Baleur de liaison | - | — | — | | options | Les données des options, la clé de `value` et `label` peuvent être personnalisées par `Props`. | array | — | — | | props | Options de configuration, voir le tableau suivant. | object | — | — | ### CascaderPanel Events | Event Name | Description | Paramètres | | ------------- | ----------------------------------------------------- | --------------------------------------------- | | change | Se déclenche lorsque la valeur de liaison change | value | | expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes | ### CascaderPanel Methods | Method Name | Description | Parameters | | ----------------- | --------------------------------------- | ------------------------------------------------------------------------- | | getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` | | clearCheckedNodes | clear checked nodes | - | ### CascaderPanel Slots | Slot Name | Description | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. | ### Props | Attribute | Description | Type | Valeurs acceptées | Défaut | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------------- | ---------- | | expandTrigger | Mode de déclenchement des options de développement | string | click / hover | 'click' | | multiple | Si la sélection multiple est activée | boolean | - | false | | checkStrictly | Si l'état coché d'un noeud n'affecte pas ses noeuds parents et enfants | boolean | - | false | | emitPath | Lorsque les noeuds cochés changent, émet ou non un tableau du chemin du noeud. Si la valeur est false, n'émet que la valeur du noeud. | boolean | - | true | | lazy | S'il faut charger dynamiquement les noeuds enfants, utiliser avec l'attribut `lazyload` | boolean | - | false | | lazyLoad | Méthode de chargement de données de noeuds enfants, ne fonctionne que lorsque `lazy` est vrai | function(node, resolve) | - | - | | value | Spécifie quelle clé de l'objet noeud est utilisée comme valeur du noeud | string | — | 'value' | | label | Spécifie quelle clé de l'objet noeud est utilisée comme label du noeud | string | — | 'label' | | children | Spécifie quelle clé de l'objet noeud est utilisée en tant qu'enfant du noeud | string | — | 'children' | | disabled | Spécifie quelle clé de l'objet noeud est utilisée comme noeud désactivé | string | — | 'disabled' | | leaf | Spécifie quelle clé de l'objet est noeud utilisée comme champ feuille du noeud | string | — | 'leaf' |