Каскадный выбор

Каскадный селектор. Панели следующих уровней разворачиваются поэтапно; checkStrictly отключает связь родитель-потомок, позволяя выбирать любой уровень; emitPath определяет, возвращать полный путь или только значение последнего уровня; панель монтируется в body (в Vue2 нет Teleport).

При множественном выборе (multiple) значением служит массив отмеченных путей, также подчиняющийся emitPath: при emitPath=true каждый элемент — полный путь, при emitPath=false — только значение последнего уровня; контролируемая очистка (внешнее обнуление v-model) также очищает выбранные метки.

Каскадный выбор

<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="Выберите жанр живописи" 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">Полный путь (separator=">"): {{ path.length ? path.join(' &gt; ') : '(не выбрано)' }}</p>
    <LhCascader
      v-model="leaf"
      :options="options"
      :emit-path="false"
      :show-all-levels="false"
      check-strictly
      placeholder="Без связи родитель-потомок, любой уровень"
    />
    <p class="demo-note">Только последнее значение: {{ leaf.length ? leaf.join(', ') : '(не выбрано)' }}</p>
    <LhCascader
      v-model="multi"
      :options="options"
      multiple
      collapse-tags
      filterable
      placeholder="Множественный выбор + сворачивание меток + поиск"
    />
    <p class="demo-note">Значение множественного выбора: {{ multi.length ? multi.map((m) => m.join('/')).join(', ') : '(не выбрано)' }}</p>
    <LhCascader
      v-model="custom"
      :options="customOptions"
      :item-config="{ value: 'id', label: 'name', children: 'sub' }"
      placeholder="Связка пользовательских полей (id/name/sub)"
      clearable
    />
    <p class="demo-note">Пользовательские ключи: {{ custom.length ? custom.join(' / ') : '(не выбрано)' }}</p>
    <p class="demo-note">cascading (по умолчанию): раскрытие следующего уровня при наведении; каскадные данные см. в примерах выше.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    path: ['shan', 'pomo', 'dapo'],
    leaf: [],
    multi: [],
    custom: [],
    options: [
      {
        value: 'shan',
        label: 'Пейзаж',
        children: [
          {
            value: 'pomo',
            label: 'Пейзаж в стиле помо',
            children: [
              { value: 'xiaopo', label: 'Малый помо' },
              { value: 'dapo', label: 'Большой помо' },
            ],
          },
          { value: 'qianjiang', label: 'Пейзаж в стиле цянцзян' },
        ],
      },
      {
        value: 'hua',
        label: 'Цветы и птицы',
        children: [
          { value: 'gongbi', label: 'Гунби: цветы и птицы' },
          { value: 'xieyi', label: 'Сеи: цветы и птицы' },
        ],
      },
    ],
    customOptions: [
      {
        id: 'hua',
        name: 'Цветы и птицы',
        sub: [
          { id: 'gongbi', name: 'Гунби: цветы и птицы' },
          { id: 'xieyi', name: 'Сеи: цветы и птицы' },
        ],
      },
      {
        id: 'shu',
        name: 'Каллиграфия',
        sub: [{ id: 'kaishu', name: 'Стиль кайшу' }],
      },
    ],
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Выбранный путь; при emitPath=false — значение последнего уровня (при множественном выборе — массив из перечисленного)	(string \| number)[]	—
options	Данные вариантов	LhCascaderNode[]	[]
size	Размер	'small' \| 'medium' \| 'large'	'medium'
disabled / readonly / clearable	Отключено / только чтение / очищаемо	boolean	false
placeholder	Текст-плейсхолдер	string	Языковой пакет
showAllLevels	Показывать полный путь (по умолчанию) или только последний уровень	boolean	true
checkStrictly	Без связи родитель-потомок — можно выбрать любой уровень	boolean	false
emitPath	Возвращать полный путь (по умолчанию) или только значение последнего уровня	boolean	true
multiple	Множественный выбор	boolean	false
cascading	Раскрытие следующего уровня при наведении	boolean	true
separator	Разделитель пути	string	' / '
collapseTags	При множественном выборе сворачивать метки в счётчик	boolean	false
filterable	Возможность поиска	boolean	false
itemConfig	Связка пользовательских полей (value/label/children/disabled)	LhCascaderItemConfig	—
teleportTarget	Целевой узел монтирования всплывающего слоя	string \| HTMLElement	'body'
sx	Сокращённая запись разметки через sx	—	—

Events

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

Slots

Слот	Описание
no-match	Содержимое при отсутствии совпадений в поиске filterable (по умолчанию «Нет совпадений»)

Доступность

Триггер: role="combobox" + aria-expanded; панели уровней — role="listbox", варианты — role="option"; при изменении открытого уровня обновляется aria-activedescendant, поддерживается навигация с клавиатуры стрелками / Enter / Esc.