Sélecteur arborescent

Contrôle de sélection en arbre. Réutilise la logique d'extension / de coche de LhTree : en sélection simple, le premier clic sur un nœud parent se contente de l'étendre (il faut un second clic pour le sélectionner), tandis que le clic sur un nœud feuille le sélectionne directement ; la sélection multiple s'appuie sur des cases à cocher. Le panneau est monté sur body par défaut (Vue2 n'a pas de Teleport).

Sélecteur arborescent

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTreeSelect v-model="single" :data="data" placeholder="Sélection simple (clic sur un parent : extension ; clic sur une feuille : sélection)" />
      <LhTreeSelect v-model="single" :data="data" disabled placeholder="Désactivé" />
      <LhTreeSelect v-model="multi" :data="data" multiple placeholder="Sélection multiple (cases à cocher)" />
    </div>
    <LhTreeSelect v-model="embedded" :data="data" :teleported="false" placeholder="teleported=false, panneau intégré" />
    <p class="demo-note">
      Simple : {{ single || "(non sélectionné)" }} ; multiple : {{ multi.join(', ') || "(non sélectionné)" }} ; intégré : {{
        embedded || "(non sélectionné)"
      }}
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 'xishan',
    multi: [],
    embedded: '',
    data: [
      {
        key: 'song',
        label: 'Dynastie Song',
        children: [
          { key: 'fan', label: 'Fan Kuan' },
          { key: 'xishan', label: 'Voyageurs parmi les montagnes et les rivières' },
        ],
      },
      { key: 'yuan', label: 'Dynastie Yuan', children: [{ key: 'huang', label: 'Huang Gongwang' }] },
    ],
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
data	Données de l'arbre	LhTreeNode[]	[]
v-model	Valeur courante ; en sélection simple, chaîne de clé ; en sélection multiple, tableau des clés cochées	string \| string[]	—
multiple	Sélection multiple (cases à cocher affichées, la valeur est le tableau des clés cochées)	boolean	false
disabled	Désactivé	boolean	false
placeholder	Texte de l'espace réservé	string	Pack de langue
teleported	Le panneau est-il monté sur body	boolean	true
sx	Propriétés de mise en page rapide	—	—

Events

input (v-model), change (value)

Accessibilité

Le déclencheur est role="combobox" + aria-expanded ; le panneau hérite de la sémantique role="tree" / role="treeitem" de LhTree ; en mode multiple, les cases à cocher portent aria-checked, et la navigation clavier complète est prise en charge.