# Árbol

Visualización y selección en árbol. Admite casillas de verificación (por defecto con acoplamiento padre-hijo + estado indeterminado, que checkStrictly desactiva), selección múltiple y carga diferida (al expandir un nodo no cargado se invoca load); las tres claves controladas funcionan con .sync.

<template>
  <div class="demo-col" style="max-width: 320px">
    <p class="demo-note">Casillas + checkStrictly (padre e hijo desacoplados) + claves de expansión/selección/marcado iniciales</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">Selección al pulsar: {{ selected }}; Claves marcadas: {{ checked.join(', ') || '(ninguna)' }}</p>
    <p class="demo-note">multiple: selección múltiple + disabled desactiva todo el árbol</p>
    <LhTree :data="data" multiple disabled :default-expanded-keys="['tang']" @select="onSelectMulti" />
    <p class="demo-note">Resultado de la selección múltiple: {{ multi.join(', ') || '(ninguna)' }}</p>
    <p class="demo-note">Claves controladas: 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: carga diferida (al pulsar para expandir se invoca load para obtener los nodos hijos)</p>
    <LhTree :data="lazyData" lazy :load="onLoad" :default-expanded-keys="['root']" />
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: '(ninguna)',
    checked: [],
    multi: [],
    data: [
      {
        key: 'tang',
        label: 'Dinastía Tang',
        children: [
          { key: 'wangwei', label: 'Wang Wei' },
          { key: 'libai', label: 'Li Bai' },
        ],
      },
      {
        key: 'song',
        label: 'Dinastía Song',
        children: [
          {
            key: 'fan',
            label: 'Fan Kuan',
            children: [{ key: 'xishan', label: 'Viaje por las montañas y los arroyos' }],
          },
          { key: 'guo', label: 'Guo Xi' },
        ],
      },
    ],
    lazyData: [{ key: 'root', label: 'Géneros pictóricos (pulsa para expandir con carga diferida)' }],
  }),
  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: 'Paisaje' },
          { key: `${String((_b = node.key) !== null && _b !== void 0 ? _b : '')}-b`, label: 'Flores y pájaros' },
        ])
      }, 400)
    },
  },
}
</script>

# Props

Prop	Descripción	Tipo	Predeterminado
data	Datos del árbol	`LhTreeNode[]`	`[]`
showCheckbox	Muestra casillas de verificación	`boolean`	`false`
multiple	Selección múltiple (la pulsación sobre un nodo alterna la selección en lugar de reemplazarla)	`boolean`	`false`
expandOnClickNode	Al pulsar un nodo que no es hoja se expande / contrae	`boolean`	`false`
defaultExpandedKeys / expandedKeys	Claves de expansión inicial / controlada	`string[]`	—
defaultSelectedKeys / selectedKeys	Claves de selección inicial / controlada	`string[]`	—
defaultCheckedKeys / checkedKeys	Claves de marcado inicial / controlado	`string[]`	—
checkStrictly	Desacopla el marcado de padre e hijo (sin acoplamiento ni estado indeterminado)	`boolean`	`false`
lazy	Carga diferida: al expandir un nodo no hoja aún no cargado se invoca `load`	`boolean`	`false`
load	Callback de carga diferida; `resolve(children)` confirma y expande, y `reject()` cancela	`(node, resolve, reject) => void`	—
disabled	Desactiva todo el árbol	`boolean`	`false`
sx	Prop abreviada de maquetación	—	—

# Events

update:expandedKeys、update:selectedKeys、update:checkedKeys（均 .sync）、 expand (key, isExpanded)、select (key, node)、check (keys, node)、nodeLoad (node, children)

# Slots

Slot	Descripción
node	Etiqueta del nodo; parámetros de alcance `{ node, level, expanded, selected }`
empty	Contenido cuando no hay datos (predeterminado: «暂无数据»)

# Accesibilidad

Los nodos usan role="treeitem" + aria-expanded (nodos expandibles) + aria-selected / aria-checked; el contenedor usa role="tree", y se admite el desplazamiento con las flechas arriba/abajo, la expansión y la contracción con izquierda/derecha, el marcado con la barra espaciadora y la selección con Enter.

← Tabla Transferencia →