TreeSelect

El selector de árbol del menú desplegable, combina las funciones de los componentes el-tree y el-select.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

Selector para estructuras de árbol.

Seleccionar cualquier nivel

Al usar el atributo check-strictly=true, cualquier nodo puede ser marcado, de lo contrario solo se soportan los nodos de hoja.

TIP

Cuando se utiliza show-checkbox, ya que check-on-click-node es false por defecto, solo se puede seleccionar marcando, se puede establecer este valor a true, y luego hacer clic en el nodo para seleccionar.

Selección múltiple

Selección múltiple usando clics o casillas de verificación.

Selección deshabilitada

Desactivar opciones usando el campo disabled.

Filtrable

Usar métodos de filtrado de palabras clave o de filtrado personalizado. filterMethod puede personalizar el método de filtrado para los datos, filterNodeMethod puede personalizar el método de filtrado para el nodo de datos.

Contenido personalizado

Contenido personalizado de nodos de árbol.

Carga lenta

Carga perezosa de nodos de árbol, adecuada para listas de datos grandes.

API

Atributos

Puesto que este componente combina las funciones de los componentes el-tree y el-select, las propiedades originales no han sido cambiadas, por lo que no hay repetición aquí, por favor vaya al componente original para ver la documentación.

AtributosMétodosEventosSlots
treetreetreetree
selectselectselectselect

Atributos propios

NombreDescripciónTipoPor defecto
cacheData 2.2.26Los datos almacenados en caché del nodo perezoso, la estructura es la misma que los datos, usados para obtener la etiqueta de los datos descargadosobject[]

Declaraciones de tipo

Mostrar declaraciones
type CacheOption = {
  value: string | number | boolean | object
  currentLabel: string | number
  isDisabled: boolean
}

Fuente

Componentes • Documentación

Contribuidores