Дерево-выбор

Деревовидный элемент выбора. Повторно использует логику разворачивания / отметок LhTree: в режиме одного выбора первый клик по родительскому узлу только разворачивает его (выбор происходит при повторном клике), а клик по листу выбирает его сразу; в режиме множественного выбора используются флажки. Панель по умолчанию монтируется в body (в Vue2 нет Teleport).

Дерево-выбор

<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="Один выбор (клик по родителю разворачивает, по листу — выбирает)" />
      <LhTreeSelect v-model="single" :data="data" disabled placeholder="Отключено" />
      <LhTreeSelect v-model="multi" :data="data" multiple placeholder="Множественный выбор (флажки)" />
    </div>
    <LhTreeSelect v-model="embedded" :data="data" :teleported="false" placeholder="teleported=false, панель встроенная" />
    <p class="demo-note">
      Один выбор: {{ single || '(не выбрано)' }}; множественный: {{ multi.join(', ') || '(не выбрано)' }}; встроенная: {{
        embedded || '(не выбрано)'
      }}
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 'xishan',
    multi: [],
    embedded: '',
    data: [
      {
        key: 'song',
        label: 'Династия Сун',
        children: [
          { key: 'fan', label: 'Фань Куань' },
          { key: 'xishan', label: 'Путешествие по горам и рекам' },
        ],
      },
      { key: 'yuan', label: 'Династия Юань', children: [{ key: 'huang', label: 'Хуан Гунван' }] },
    ],
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
data	Данные дерева	LhTreeNode[]	[]
v-model	Текущее значение; при одном выборе — строка-ключ, при множественном — массив ключей отметок	string \| string[]	—
multiple	Множественный выбор (показываются флажки, значение — массив ключей отметок)	boolean	false
disabled	Отключено	boolean	false
placeholder	Плейсхолдер	string	Языковой пакет
teleported	Монтируется ли панель в body	boolean	true
sx	Компактная раскладка через sx	—	—

Events

input (v-model), change (value)

Доступность

Триггер — role="combobox" + aria-expanded; внутри панели наследуется семантика role="tree" / role="treeitem" от LhTree; в режиме множественного выбора флажки помечаются aria-checked, поддерживается полная навигация с клавиатуры.