Arborescence

Affichage et sélection en arbre. Prend en charge les cases à cocher (par défaut avec cascade parent-enfant + demi-sélection ; checkStrictly supprime cette liaison), la sélection multiple, le chargement paresseux (load est appelé lors de l'extension d'un nœud non chargé) ; les trois clés contrôlées reposent toutes sur .sync.

Arborescence

<template>
  <div class="demo-col" style="max-width: 320px">
    <p class="demo-note">Case à cocher + checkStrictly (parent et enfants indépendants) + clés d'extension / de sélection / de coche par défaut</p>
    <LhTree
      :data="data"
      show-checkbox
      check-strictly
      :default-expanded-keys="['song']"
      :default-selected-keys="['xishan']"
      :default-checked-keys="['libai']"
      :expand-on-click-node="false"
      @select="onSelect"
      @check="onCheck"
    />
    <p class="demo-note">Sélection au clic : {{ selected }} ; clés cochées : {{ checked.join(', ') || "(aucune)" }}</p>
    <p class="demo-note">multiple (sélection multiple) + disabled (arbre entier désactivé)</p>
    <LhTree :data="data" multiple disabled :default-expanded-keys="['tang']" @select="onSelectMulti" />
    <p class="demo-note">Résultat multiple : {{ multi.join(', ') || "(aucune)" }}</p>
    <p class="demo-note">Clés contrôlées : expandedKeys / selectedKeys / checkedKeys</p>
    <LhTree
      :data="data"
      show-checkbox
      :expanded-keys="['song']"
      :selected-keys="['guo']"
      :checked-keys="['xishan']"
      @select="onSelect"
    />
    <p class="demo-note">lazy (chargement paresseux : load est appelé à l'extension pour récupérer les enfants)</p>
    <LhTree :data="lazyData" lazy :load="onLoad" :default-expanded-keys="['root']" />
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: "(aucune)",
    checked: [],
    multi: [],
    data: [
      {
        key: 'tang',
        label: 'Dynastie Tang',
        children: [
          { key: 'wangwei', label: 'Wang Wei' },
          { key: 'libai', label: 'Li Bai' },
        ],
      },
      {
        key: 'song',
        label: 'Dynastie Song',
        children: [
          {
            key: 'fan',
            label: 'Fan Kuan',
            children: [{ key: 'xishan', label: 'Voyageurs parmi les montagnes et les rivières' }],
          },
          { key: 'guo', label: 'Guo Xi' },
        ],
      },
    ],
    lazyData: [{ key: 'root', label: 'Genre pictural (cliquez pour étendre : chargement paresseux)' }],
  }),
  methods: {
    onSelect(key) {
      this.selected = String(key)
    },
    onCheck(keys) {
      this.checked = Array.isArray(keys) ? keys : []
    },
    onSelectMulti(keys) {
      this.multi = Array.isArray(keys) ? keys : [String(keys)]
    },
    onLoad(node, resolve) {
      setTimeout(() => {
        var _a, _b
        resolve([
          { key: `${String((_a = node.key) !== null && _a !== void 0 ? _a : '')}-a`, label: 'Paysage' },
          { key: `${String((_b = node.key) !== null && _b !== void 0 ? _b : '')}-b`, label: 'Fleurs et oiseaux' },
        ])
      }, 400)
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
data	Données de l'arbre	LhTreeNode[]	[]
showCheckbox	Afficher les cases à cocher	boolean	false
multiple	Sélection multiple (le clic sur un nœud bascule la sélection au lieu de la remplacer)	boolean	false
expandOnClickNode	Étendre / réduire lors du clic sur un nœud non feuille	boolean	false
defaultExpandedKeys / expandedKeys	Clés d'extension par défaut / contrôlées	string[]	—
defaultSelectedKeys / selectedKeys	Clés de sélection par défaut / contrôlées	string[]	—
defaultCheckedKeys / checkedKeys	Clés de coche par défaut / contrôlées	string[]	—
checkStrictly	Pas de cascade parent-enfant pour la coche (ni cascade, ni demi-sélection)	boolean	false
lazy	Chargement paresseux : appelle load lors de l'extension d'un nœud non chargé	boolean	false
load	Rappel de chargement paresseux : resolve(children) valide et étend, reject() annule	(node, resolve, reject) => void	—
disabled	Désactivé globalement	boolean	false
sx	Propriétés de mise en page rapide	—	—

Events

update:expandedKeys, update:selectedKeys, update:checkedKeys (tous en .sync), expand (key, isExpanded), select (key, node), check (keys, node), nodeLoad (node, children)

Slots

Slot	Description
node	Étiquette du nœud, paramètres de portée { node, level, expanded, selected }
empty	Contenu en l'absence de données (par défaut : « 暂无数据 »)

Accessibilité

Les nœuds sont role="treeitem" + aria-expanded (nœuds extensibles) + aria-selected / aria-checked ; le conteneur est role="tree" ; les flèches directionnelles permettent de se déplacer de haut en bas et d'étendre / réduire, la barre d'espace de cocher et la touche Entrée de sélectionner.