Selector en árbol

Control de selección en árbol. Reutiliza la lógica de expansión / selección de LhTree: en la selección única, la primera pulsación sobre un nodo padre únicamente lo expande (se selecciona al pulsar de nuevo) y la pulsación sobre un nodo hoja lo selecciona directamente; en la selección múltiple se usan casillas de verificación. El panel se monta por defecto en body (Vue2 no dispone de Teleport).

Selector en árbol

<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="Selección única (pulsa un nodo padre para expandirlo, un nodo hoja para seleccionarlo)" />
      <LhTreeSelect v-model="single" :data="data" disabled placeholder="Desactivado" />
      <LhTreeSelect v-model="multi" :data="data" multiple placeholder="Selección múltiple (casillas de verificación)" />
    </div>
    <LhTreeSelect v-model="embedded" :data="data" :teleported="false" placeholder="teleported=false: panel integrado" />
    <p class="demo-note">
      Único: {{ single || '(sin selección)' }}; Múltiple: {{ multi.join(', ') || '(sin selección)' }}; Integrado: {{
        embedded || '(sin selección)'
      }}
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 'xishan',
    multi: [],
    embedded: '',
    data: [
      {
        key: 'song',
        label: 'Dinastía Song',
        children: [
          { key: 'fan', label: 'Fan Kuan' },
          { key: 'xishan', label: 'Viaje por las montañas y los arroyos' },
        ],
      },
      { key: 'yuan', label: 'Dinastía Yuan', children: [{ key: 'huang', label: 'Huang Gongwang' }] },
    ],
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
data	Datos del árbol	LhTreeNode[]	[]
v-model	Valor actual; en la selección única es una cadena con la clave, y en la selección múltiple, un arreglo de claves marcadas	string \| string[]	—
multiple	Selección múltiple (muestra casillas de verificación; el valor es un arreglo de claves marcadas)	boolean	false
disabled	Desactivado	boolean	false
placeholder	Texto del marcador de posición	string	Paquete de idioma
teleported	Si el panel se monta en body	boolean	true
sx	Prop abreviada de maquetación	—	—

Events

input（v-model）、change (value)

Accesibilidad

El disparador usa role="combobox" + aria-expanded, y el panel hereda la semántica role="tree" / role="treeitem" de LhTree; en el modo de selección múltiple, las casillas llevan aria-checked y se admite la navegación completa mediante teclado.