Sélecteur en cascade

Sélecteur en cascade. Les panneaux de niveau inférieur se déploient progressivement ; checkStrictly dissocie parent et enfant afin de pouvoir sélectionner n'importe quel niveau, et emitPath contrôle si la valeur renvoyée est le chemin complet ou uniquement la valeur finale ; le panneau est monté dans le body (pas de Teleport en Vue2).

En mode multiple (multiple), la valeur est un tableau des chemins cochés, soumis à emitPath : avec emitPath=true chaque élément est le chemin complet, avec emitPath=false chaque élément est uniquement la valeur finale ; un effacement contrôlé (mise à zéro de v-model depuis l'extérieur) efface également les étiquettes sélectionnées.

Sélecteur en cascade

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhCascader v-model="path" :options="options" placeholder="Choisir un genre pictural" clearable separator=">" />
      <LhCascader v-model="path" :options="options" size="small" disabled />
      <LhCascader v-model="path" :options="options" size="large" readonly />
    </div>
    <p class="demo-note">Chemin complet (separator=">") : {{ path.length ? path.join(' &gt; ') : '(non sélectionné)' }}</p>
    <LhCascader
      v-model="leaf"
      :options="options"
      :emit-path="false"
      :show-all-levels="false"
      check-strictly
      placeholder="Parent et enfant dissociés, tous niveaux sélectionnables"
    />
    <p class="demo-note">Valeur finale uniquement : {{ leaf.length ? leaf.join(', ') : '(non sélectionné)' }}</p>
    <LhCascader
      v-model="multi"
      :options="options"
      multiple
      collapse-tags
      filterable
      placeholder="Multiple + étiquettes repliées + recherche"
    />
    <p class="demo-note">Valeurs multiples : {{ multi.length ? multi.map((m) => m.join('/')).join(', ') : '(non sélectionné)' }}</p>
    <LhCascader
      v-model="custom"
      :options="customOptions"
      :item-config="{ value: 'id', label: 'name', children: 'sub' }"
      placeholder="Mapping de champs personnalisé (id/name/sub)"
      clearable
    />
    <p class="demo-note">Clés personnalisées : {{ custom.length ? custom.join(' / ') : '(non sélectionné)' }}</p>
    <p class="demo-note">cascading (par défaut) déploie le niveau inférieur au survol ; voir les exemples ci-dessus pour les données en cascade.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    path: ['shan', 'pomo', 'dapo'],
    leaf: [],
    multi: [],
    custom: [],
    options: [
      {
        value: 'shan',
        label: 'Paysage',
        children: [
          {
            value: 'pomo',
            label: 'Paysage au lavis',
            children: [
              { value: 'xiaopo', label: 'Petit lavis' },
              { value: 'dapo', label: 'Grand lavis' },
            ],
          },
          { value: 'qianjiang', label: 'Paysage aux tons clairs' },
        ],
      },
      {
        value: 'hua',
        label: 'Fleurs et oiseaux',
        children: [
          { value: 'gongbi', label: 'Fleurs et oiseaux au pinceau fin' },
          { value: 'xieyi', label: 'Fleurs et oiseaux au style libre' },
        ],
      },
    ],
    customOptions: [
      {
        id: 'hua',
        name: 'Fleurs et oiseaux',
        sub: [
          { id: 'gongbi', name: 'Fleurs et oiseaux au pinceau fin' },
          { id: 'xieyi', name: 'Fleurs et oiseaux au style libre' },
        ],
      },
      {
        id: 'shu',
        name: 'Calligraphie',
        sub: [{ id: 'kaishu', name: 'Style régulier' }],
      },
    ],
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Chemin de la sélection ; lorsque emitPath=false, valeur finale (en mode multiple, tableau de l'un ou l'autre)	(string \| number)[]	—
options	Données des options sélectionnables	LhCascaderNode[]	[]
size	Taille	'small' \| 'medium' \| 'large'	'medium'
disabled / readonly / clearable	Désactivé / lecture seule / effaçable	boolean	false
placeholder	Texte de substitution	string	Pack de langue
showAllLevels	Afficher le chemin complet (par défaut) ou uniquement la valeur finale	boolean	true
checkStrictly	Parent et enfant dissociés, tout niveau sélectionnable	boolean	false
emitPath	Renvoyer le chemin complet (par défaut) ou uniquement la valeur finale	boolean	true
multiple	Sélection multiple	boolean	false
cascading	Déployer le niveau inférieur au survol	boolean	true
separator	Séparateur de chemin	string	' / '
collapseTags	En mode multiple, replier les étiquettes sous forme de compteur	boolean	false
filterable	Recherche possible ou non	boolean	false
itemConfig	Mapping de champs personnalisé (value/label/children/disabled)	LhCascaderItemConfig	—
teleportTarget	Cible de montage de la couche flottante	string \| HTMLElement	'body'
sx	Raccourci de mise en page sx	—	—

Events

input (v-model), change (value, nodes)

Slots

Slot	Description
no-match	Contenu affiché lorsque la recherche filterable ne trouve aucune correspondance (« Aucune donnée correspondante » par défaut)

Accessibilité

Le déclencheur est role="combobox" + aria-expanded, chaque niveau de panneau role="listbox" et les options role="option" ; aria-activedescendant est synchronisé lors du changement de niveau déployé, et la navigation au clavier par flèches / Enter / ESC est prise en charge.