Дерево

Деревовидное отображение и выбор. Поддерживаются флажки (по умолчанию каскадная связь родитель-потомок + неопределённое состояние, checkStrictly разрывает связь), множественный выбор, ленивая загрузка (при разворачивании незагруженного узла вызывается load); все три управляемых ключа работают через .sync.

Дерево

<template>
  <div class="demo-col" style="max-width: 320px">
    <p class="demo-note">Флажки + checkStrictly (без связи родитель-потомок) + ключи разворачивания / выделения / отметок по умолчанию</p>
    <LhTree
      :data="data"
      show-checkbox
      check-strictly
      :default-expanded-keys="['song']"
      :default-selected-keys="['xishan']"
      :default-checked-keys="['libai']"
      :expand-on-click-node="false"
      @select="onSelect"
      @check="onCheck"
    />
    <p class="demo-note">Выделено кликом: {{ selected }}; ключи отметок: {{ checked.join(', ') || '(нет)' }}</p>
    <p class="demo-note">multiple — множественный выбор + disabled отключает всё дерево</p>
    <LhTree :data="data" multiple disabled :default-expanded-keys="['tang']" @select="onSelectMulti" />
    <p class="demo-note">Результат множественного выбора: {{ multi.join(', ') || '(нет)' }}</p>
    <p class="demo-note">Управляемые ключи: expandedKeys / selectedKeys / checkedKeys</p>
    <LhTree
      :data="data"
      show-checkbox
      :expanded-keys="['song']"
      :selected-keys="['guo']"
      :checked-keys="['xishan']"
      @select="onSelect"
    />
    <p class="demo-note">lazy — ленивая загрузка (при клике разворачивания вызывается load и подтягивает дочерние узлы)</p>
    <LhTree :data="lazyData" lazy :load="onLoad" :default-expanded-keys="['root']" />
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: '(нет)',
    checked: [],
    multi: [],
    data: [
      {
        key: 'tang',
        label: 'Династия Тан',
        children: [
          { key: 'wangwei', label: 'Ван Вэй' },
          { key: 'libai', label: 'Ли Бо' },
        ],
      },
      {
        key: 'song',
        label: 'Династия Сун',
        children: [
          {
            key: 'fan',
            label: 'Фань Куань',
            children: [{ key: 'xishan', label: 'Путешествие по горам и рекам' }],
          },
          { key: 'guo', label: 'Го Си' },
        ],
      },
    ],
    lazyData: [{ key: 'root', label: 'Жанры живописи (кликните для ленивой загрузки)' }],
  }),
  methods: {
    onSelect(key) {
      this.selected = String(key)
    },
    onCheck(keys) {
      this.checked = Array.isArray(keys) ? keys : []
    },
    onSelectMulti(keys) {
      this.multi = Array.isArray(keys) ? keys : [String(keys)]
    },
    onLoad(node, resolve) {
      setTimeout(() => {
        var _a, _b
        resolve([
          { key: `${String((_a = node.key) !== null && _a !== void 0 ? _a : '')}-a`, label: 'Пейзаж' },
          { key: `${String((_b = node.key) !== null && _b !== void 0 ? _b : '')}-b`, label: 'Цветы и птицы' },
        ])
      }, 400)
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
data	Данные дерева	LhTreeNode[]	[]
showCheckbox	Показывать флажки	boolean	false
multiple	Множественный выбор (клик по узлу переключает выделение, а не заменяет его)	boolean	false
expandOnClickNode	Разворот / свёртка при клике по узлу, не являющемуся листом	boolean	false
defaultExpandedKeys / expandedKeys	Ключи развёрнутых узлов по умолчанию / управляемые	string[]	—
defaultSelectedKeys / selectedKeys	Ключи выделенных узлов по умолчанию / управляемые	string[]	—
defaultCheckedKeys / checkedKeys	Ключи отмеченных узлов по умолчанию / управляемые	string[]	—
checkStrictly	Отметки родителя и потомка не связаны (без каскада и неопределённого состояния)	boolean	false
lazy	Ленивая загрузка: при разворачивании незагруженного узла, не являющегося листом, вызывается load	boolean	false
load	Коллбэк ленивой загрузки: resolve(children) передаёт данные и разворачивает, reject() отменяет	(node, resolve, reject) => void	—
disabled	Полное отключение	boolean	false
sx	Компактная раскладка через sx	—	—

Events

update:expandedKeys, update:selectedKeys, update:checkedKeys (все через .sync), expand (key, isExpanded), select (key, node), check (keys, node), nodeLoad (node, children)

Slots

Слот	Описание
node	Метка узла, областные параметры { node, level, expanded, selected }
empty	Содержимое при отсутствии данных (по умолчанию «Нет данных»)

Доступность

Узлы — role="treeitem" + aria-expanded (разворачиваемые узлы) + aria-selected / aria-checked; контейнер — role="tree"; поддерживаются стрелки вверх / вниз для перемещения, вправо / влево для разворота / свёртки, пробел для отметки, Enter для выделения.