Selector en árbol

Combinación de disparador desplegable + panel Tree. En selección única devuelve string; en selección múltiple (con casillas) devuelve string[].

Uso básico

Selección única

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'Frontend', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Backend' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

Selección múltiple

Selección múltiple

<script setup>
import { ref } from 'vue'
const treeMulti = ref([])
</script>

<template>
  <!-- Selección múltiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Selecciona una pila tecnológica" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <!-- Selección múltiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Selecciona una pila tecnológica" />
</template>

Deshabilitado y montaje

disabled deshabilita el selector; cuando teleported es false, el panel desplegable se monta en su sitio (sin teletransportarse a body).

Deshabilitado / panel local

<script setup>
import { ref } from 'vue'
const treeDisabled = ref([])
const treeLocal = ref([])
</script>

<template>
  <!-- Deshabilitado -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Panel local -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <!-- Deshabilitado -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Panel local -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

Prop	Descripción	Tipo	Predeterminado
data	Datos del árbol	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	Valor actual (selection unique string / multiple string[], v-model controlado)	string | string[]	—
multiple	Selección múltiple (muestra casillas; el valor es un array de claves marcadas)	boolean	false
disabled	Deshabilitado	boolean	false
placeholder	Texto del marcador de posición	string	—
teleported	Si el panel se monta en body (por defecto true)	boolean	true
sx	Propiedades de diseño rápido sx	LhSxProps	—

Events

Evento	Descripción	Parámetros
update:modelValue	Se dispara cuando cambia el valor seleccionado, para usarse con v-model (único: string; múltiple: string[])	(value: string | string[] | undefined)
change	Se dispara tras el cambio de selección	(value: string | string[] | undefined)

Accesibilidad

• El disparador es un <button> real, con aria-haspopup="tree" + aria-expanded para marcar el estado de expansión; el panel usa role="listbox" (en múltiple se añade aria-multiselectable)
• El interior del panel reutiliza por completo la navegación por teclado del patrón tree de la APG de Tree
• Al hacer clic fuera del componente o pulsar Escape se cierra, y el foco regresa al disparador tras el cierre

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/tree-select/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** Datos del árbol */
  data: LhTreeNode[]
  /** Valor actual (único: string / múltiple: string[], v-model controlado) */
  modelValue?: string | string[]
  /** Selección múltiple (muestra casillas; el valor es un array de claves marcadas) */
  multiple?: boolean
  /** Deshabilitado */
  disabled?: boolean
  /** Texto del marcador de posición */
  placeholder?: string
  /** Si el panel se monta en body (por defecto true) */
  teleported?: boolean
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

LhTreeNode _{(de @lh-ui/share/core/tree)}

/** Datos del nodo del árbol */
export interface LhTreeNode {
  /** Clave única */
  key: string
  /** Texto mostrado */
  label: string
  /** Nodos secundarios */
  children?: LhTreeNode[]
  /** Deshabilitado */
  disabled?: boolean
  /** Si es un nodo hoja (si no se indica, se deduce a partir de children) */
  isLeaf?: boolean
}