Selector en cascada

Selector en cascada. Los paneles de cada nivel se abren sucesivamente; con checkStrictly se desactiva la vinculación padre-hijo y se puede elegir cualquier nivel, mientras que emitPath controla si el valor devuelto es la ruta completa o solo el último nivel. El panel se monta en el body (Vue2 no tiene Teleport).

En la selección múltiple (multiple), el valor es un arreglo de rutas marcadas, también sujeto a emitPath: con emitPath=true cada elemento es la ruta completa y con emitPath=false, solo el valor del último nivel; vaciar de forma controlada (poner v-model a vacío desde fuera) también borra las etiquetas seleccionadas.

Selector en cascada

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhCascader v-model="path" :options="options" placeholder="Selecciona una categoría pictórica" clearable separator=">" />
      <LhCascader v-model="path" :options="options" size="small" disabled />
      <LhCascader v-model="path" :options="options" size="large" readonly />
    </div>
    <p class="demo-note">Ruta completa (separator=">"): {{ path.length ? path.join(' &gt; ') : '(sin selección)' }}</p>
    <LhCascader
      v-model="leaf"
      :options="options"
      :emit-path="false"
      :show-all-levels="false"
      check-strictly
      placeholder="Sin vinculación padre-hijo; se puede elegir cualquier nivel"
    />
    <p class="demo-note">Solo el valor del último nivel: {{ leaf.length ? leaf.join(', ') : '(sin selección)' }}</p>
    <LhCascader
      v-model="multi"
      :options="options"
      multiple
      collapse-tags
      filterable
      placeholder="Selección múltiple + etiquetas colapsadas + búsqueda"
    />
    <p class="demo-note">Valor de la selección múltiple: {{ multi.length ? multi.map((m) => m.join('/')).join(', ') : '(sin selección)' }}</p>
    <LhCascader
      v-model="custom"
      :options="customOptions"
      :item-config="{ value: 'id', label: 'name', children: 'sub' }"
      placeholder="Asignación de campos personalizada (id/name/sub)"
      clearable
    />
    <p class="demo-note">Claves personalizadas: {{ custom.length ? custom.join(' / ') : '(sin selección)' }}</p>
    <p class="demo-note">cascading (predeterminado) expande el nivel inferior al pasar el cursor; los datos en cascada se ven en los ejemplos de arriba.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    path: ['shan', 'pomo', 'dapo'],
    leaf: [],
    multi: [],
    custom: [],
    options: [
      {
        value: 'shan',
        label: 'Paisaje',
        children: [
          {
            value: 'pomo',
            label: 'Paisaje con tinta salpicada',
            children: [
              { value: 'xiaopo', label: 'Tinta salpicada (pequeña)' },
              { value: 'dapo', label: 'Tinta salpicada (grande)' },
            ],
          },
          { value: 'qianjiang', label: 'Paisaje con tonos claros' },
        ],
      },
      {
        value: 'hua',
        label: 'Flores y pájaros',
        children: [
          { value: 'gongbi', label: 'Flores y pájaros (gongbi)' },
          { value: 'xieyi', label: 'Flores y pájaros (xieyi)' },
        ],
      },
    ],
    customOptions: [
      {
        id: 'hua',
        name: 'Flores y pájaros',
        sub: [
          { id: 'gongbi', name: 'Flores y pájaros (gongbi)' },
          { id: 'xieyi', name: 'Flores y pájaros (xieyi)' },
        ],
      },
      {
        id: 'shu',
        name: 'Caligrafía',
        sub: [{ id: 'kaishu', name: 'Caligrafía regular' }],
      },
    ],
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Ruta seleccionada; con emitPath=false, el valor del último nivel (en selección múltiple, un arreglo de cualquiera de los dos)	(string \| number)[]	—
options	Datos de las opciones seleccionables	LhCascaderNode[]	[]
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
disabled / readonly / clearable	Deshabilitado / solo lectura / se puede vaciar	boolean	false
placeholder	Texto del marcador de posición	string	paquete de idioma
showAllLevels	Muestra la ruta completa (predeterminado) o solo el último nivel	boolean	true
checkStrictly	Sin vinculación padre-hijo; se puede elegir cualquier nivel	boolean	false
emitPath	Devuelve la ruta completa (predeterminado) o solo el valor del último nivel	boolean	true
multiple	Selección múltiple	boolean	false
cascading	Expande el nivel inferior al pasar el cursor	boolean	true
separator	Separador de la ruta	string	' / '
collapseTags	En la selección múltiple, colapsa las etiquetas en un contador	boolean	false
filterable	Permite búsqueda	boolean	false
itemConfig	Asignación personalizada de campos (value/label/children/disabled)	LhCascaderItemConfig	—
teleportTarget	Destino de montaje de la capa emergente	string \| HTMLElement	'body'
sx	Propiedades de layout abreviadas	—	—

Events

input (v-model), change (value, nodes)

Slots

Slot	Descripción
no-match	Contenido que se muestra cuando la búsqueda de filterable no encuentra coincidencias (por defecto, "Sin datos coincidentes")

Accesibilidad

El disparador es role="combobox" con aria-expanded; los paneles de cada nivel son role="listbox" y las opciones, role="option". Al cambiar el nivel expandido se sincroniza aria-activedescendant, y se puede navegar con el teclado mediante las flechas, Enter y ESC.