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

Комбинация: триггер-выпадашка + панель Tree. Одиночный выбор возвращает string, множественный (с чекбоксами) — string[].

Базовое использование

Одиночный выбор

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'Фронтенд', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Бэкенд' },
]
</script>

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

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'Фронтенд', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Бэкенд' },
      ],
    }
  },
}
</script>

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

Множественный выбор

Множественный выбор

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

<template>
  <!-- Множественный выбор -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Выберите технологический стек" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'Фронтенд', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Бэкенд' },
      ],
    }
  },
}
</script>

<template>
  <!-- Множественный выбор -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Выберите технологический стек" />
</template>

Отключение и место монтирования

disabled отключает селектор; teleported со значением false монтирует выпадающую панель на месте (без передачи в body).

Отключение / панель на месте

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

<template>
  <!-- Отключение -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Панель на месте -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: 'Фронтенд', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Бэкенд' },
      ],
    }
  },
}
</script>

<template>
  <!-- Отключение -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Панель на месте -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

Свойство	Описание	Тип	Значение по умолчанию
data	данные дерева	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	текущее значение (одиночный выбор string / множественный string[], управляемый v-model)	string | string[]	—
multiple	множественный выбор (показываются чекбоксы, значение — массив ключей)	boolean	false
disabled	отключено	boolean	false
placeholder	плейсхолдер	string	—
teleported	монтировать ли панель в body (по умолчанию true)	boolean	true
sx	свойства быстрой раскладки sx	LhSxProps	—

Events

Событие	Описание	Колбэк
update:modelValue	вызывается при изменении выбранного значения, использовать совместно с v-model (одиночный выбор — string, множественный — string[])	(value: string | string[] | undefined)
change	вызывается после изменения выбора	(value: string | string[] | undefined)

Доступность

• Триггер — настоящая <button>, aria-haspopup="tree" + aria-expanded отмечают состояние развёрнутости; панель — role="listbox" (при множественном выборе добавляется aria-multiselectable)
• Внутри панели полностью переиспользуется навигация с клавиатуры по паттерну APG tree из Tree
• Закрытие по щелчку вне компонента или нажатию Escape; после закрытия фокус возвращается триггеру

Определения типов

Ниже приведены структуры типов TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/tree-select/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** данные дерева */
  data: LhTreeNode[]
  /** текущее значение (одиночный выбор string / множественный string[], управляемый v-model) */
  modelValue?: string | string[]
  /** множественный выбор (показываются чекбоксы, значение — массив ключей) */
  multiple?: boolean
  /** отключено */
  disabled?: boolean
  /** плейсхолдер */
  placeholder?: string
  /** монтировать ли панель в body (по умолчанию true) */
  teleported?: boolean
  /** sx: свойства быстрой раскладки */
  sx?: LhSxProps
}

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

/** данные узла дерева */
export interface LhTreeNode {
  /** уникальный ключ */
  key: string
  /** отображаемый текст */
  label: string
  /** дочерние узлы */
  children?: LhTreeNode[]
  /** отключено */
  disabled?: boolean
  /** является ли листом (если не указано, выводится по children) */
  isLeaf?: boolean
}