Для плоского набора без вложенности подойдёт CdsList, для навигации по разделам — CdsMenu, а для раскрывающихся секций контента — CdsExpandablePanel.

Анатомия

Узел дерева складывается из отступа вложенности, переключателя раскрытия и контента с заголовком. Чекбокс появляется с пропом checkable, иконка узла — с show-icon.

Storybook

Вариации

Раскрытие узлов

Данные дерева — массив узлов { title, key, children } в пропе tree-data. Состоянием раскрытия управляет v-model:expanded-keys; если контролировать его не нужно, задайте стартовое состояние через default-expanded-keys или default-expand-all.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const basicTreeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
      }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0-0']);
const treeData = basicTreeData;
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree v-model:expanded-keys="expandedKeys" :tree-data="treeData" />
  </div>
</template>

Проп expand-action раскрывает узел кликом по всей строке: click — по одиночному, dblclick — по двойному. Без него узел раскрывается только переключателем.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';

const treeData = (action: NTree.TExpandAction): NTree.IDataNode[] => [
  {
    title: action === 'click' ? 'Нажми на меня' : 'Дважды нажми на меня',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
      }
    ]
  }
];
</script>

<template>
  <div class="m-auto flex max-w-[320px] flex-col gap-4">
    <CdsTree :tree-data="treeData('click')" expand-action="click" />
    <CdsTree :tree-data="treeData('dblclick')" expand-action="dblclick" />
  </div>
</template>

Выбор узлов и чекбоксы

Проп selectable включает выбор узла кликом (v-model:selected-keys), multiple разрешает выбрать несколько узлов. Проп checkable добавляет чекбоксы с собственным состоянием v-model:checked-keys: отметка родителя отмечает всех потомков, а частично отмеченный родитель переходит в промежуточное состояние (отключается пропом check-strictly). Отдельные узлы блокируются флагами disabled и disableCheckbox прямо в данных.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsToggle, CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Заблокированный узел', key: '0-0-0-0', disabled: true },
          { title: 'Заблокированный чекбокс', key: '0-0-0-1', disableCheckbox: true },
          { title: 'Вложенный узел', key: '0-0-0-2' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [
          { title: 'Вложенный узел', key: '0-0-1-0' },
          { title: 'Вложенный узел', key: '0-0-1-1' },
          { title: 'Вложенный узел', key: '0-0-1-2' }
        ]
      }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0-0']);
const selectedKeys = ref<string[]>(['0-0-0']);
const checkedKeys = ref<string[]>(['0-0-0']);
const isMultiple = ref(false);
</script>

<template>
  <div class="m-auto max-w-[420px]">
    <div class="mb-2">
      <CdsToggle v-model="isMultiple" label="Мультивыбор selectedKeys" hide-messages />
    </div>

    <CdsTree
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      v-model:checked-keys="checkedKeys"
      :tree-data="treeData"
      :multiple="isMultiple"
      checkable
      selectable
    />

    <div class="mt-4 flex justify-between gap-2 text-content-secondary">
      <div>
        <span>expandedKeys:</span>
        <pre>{{ expandedKeys }}</pre>
      </div>
      <div>
        <span>selectedKeys:</span>
        <pre>{{ selectedKeys }}</pre>
      </div>
      <div>
        <span>checkedKeys:</span>
        <pre>{{ checkedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

Соединительные линии

Проп show-line рисует линии между узлами — в глубоких деревьях так проще следить за уровнями. Объект { showLeafIcon } управляет иконкой листовых узлов.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsToggle, CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел 1', key: '0-0-0-0' },
          { title: 'Многострочный вложенный узел 2', key: '0-0-0-1' },
          { title: 'Вложенный узел 3', key: '0-0-0-2' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел 1', key: '0-0-1-0' }]
      }
    ]
  },
  {
    title: 'Родительский узел 2',
    key: '0-1',
    children: [
      {
        title: 'Родительский узел 2-0',
        key: '0-1-0',
        children: [
          { title: 'Вложенный узел', key: '0-1-0-0' },
          { title: 'Вложенный узел', key: '0-1-0-1' }
        ]
      }
    ]
  }
];

const showLeafIcon = ref(false);

const onSelect = (selectedKeys: NTree.TKey[], info: unknown) => {
  console.log('selected', selectedKeys, info);
};
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <div class="mb-2">
      <CdsToggle v-model="showLeafIcon" label="Иконка листа" hide-messages />
    </div>
    <CdsTree :tree-data="treeData" :default-expanded-keys="['0-0-0']" :show-line="{ showLeafIcon }" @select="onSelect">
      <template #title="{ title, key }">
        <template v-if="key === '0-0-0-1'">
          <div>{{ title }}</div>
          <div>{{ title }}</div>
        </template>
        <template v-else>{{ title }}</template>
      </template>
    </CdsTree>
  </div>
</template>

Иконки и слоты

Слоты кастомизируют каждую часть узла; в них приходит контекст узла — key, title, expanded, selected и другие поля.

Слот	Описание
default	Декларативное описание узлов разметкой вместо tree-data
icon	Иконка узла. Отображается при show-icon
switcherIcon	Иконка переключателя раскрытия
title	Содержимое заголовка узла

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsIcon, CdsTree } from '@central-design-system/components';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [
          { title: 'Вложенный узел', key: '0-0-1-0' },
          { title: 'Вложенный узел', key: '0-0-1-1' }
        ]
      }
    ]
  }
];
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree :tree-data="treeData" default-expand-all show-icon checkable>
      <template #switcherIcon="{ switcherCls, expanded }">
        <CdsIcon :name="expanded ? 'minus' : 'add'" :class="switcherCls" />
      </template>

      <template #icon="{ key, selected }">
        <CdsIcon v-if="key === '0-0'" name="add" />
        <CdsIcon v-else-if="key === '0-0-0'" name="settings" />
        <CdsIcon v-else-if="selected" name="info-fill" />
        <CdsIcon v-else name="info" />
      </template>

      <template #title="{ title, key }">
        <div v-if="key === '0-0-1-0'" class="flex items-center gap-1">
          <strong>{{ title }}</strong>
          <CdsIcon name="star" />
        </div>
        <template v-else>{{ title }}</template>
      </template>
    </CdsTree>
  </div>
</template>

Асинхронная загрузка

Проп load-data подгружает дочерние узлы при первом раскрытии: функция получает узел, возвращает промис и дописывает children в данные. Пока промис не разрешён, у узла крутится индикатор загрузки.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref } from 'vue';

const treeData = ref<NTree.IDataNode[]>([
  { title: 'Родительский асинхронный узел', key: '0' },
  { title: 'Родительский асинхронный узел', key: '1' },
  { title: 'Родительский узел', key: '2', isLeaf: true }
]);

const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);

const onLoadData = (treeNode: NTree.IEventDataNode) =>
  new Promise<void>((resolve) => {
    if (treeNode.dataRef && treeNode.dataRef.children) {
      resolve();
      return;
    }

    setTimeout(() => {
      if (!treeNode.dataRef) return;

      treeNode.dataRef.children = [
        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-0` },
        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-1` }
      ];

      treeData.value = [...unref(treeData)];

      resolve();
    }, 1000);
  });
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      :tree-data="treeData"
      :load-data="onLoadData"
    />
  </div>
</template>

Перетаскивание

Проп draggable разрешает перетаскивать узлы; вариант { icon: true } показывает ручку перетаскивания. Дерево не меняет данные само — обработчик @drop перестраивает tree-data, а allow-drop ограничивает допустимые места сброса.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref } from 'vue';

const generatedData: NTree.IDataNode[] = [];

const x = 5;
const y = 3;
const z = 2;

const generateData = (level: number, preKey = '0', treeNode: NTree.IDataNode[] = generatedData) => {
  const children: string[] = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    treeNode.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (level < 0) {
    return treeNode;
  }
  const nextLevel = level - 1;
  children.forEach((key, index) => {
    treeNode[index].children = [];
    generateData(nextLevel, key, treeNode[index].children);
  });
};

generateData(z);

const treeData = ref<NTree.IDataNode[]>(generatedData);

const onDrop = (info: any) => {
  const dropKey = info.node.key;
  const dragKey = info.dragNode!.key;
  const dropPos = info.node.pos!.split('-');
  const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

  const loop = (data: NTree.IDataNode[] | undefined, key: string | number, callback: any) => {
    if (!data) return;
    data.forEach((item, index) => {
      if (item.key === key) {
        return callback(item, index, data);
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
    });
  };

  const data = [...unref(treeData)];
  let dragObj: NTree.IDataNode;

  loop(data, dragKey!, (item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
    arr.splice(index, 1);
    dragObj = item;
  });

  if (!info.dropToGap) {
    loop(data, dropKey!, (item: NTree.IDataNode) => {
      item.children = item.children || [];
      item.children.unshift(dragObj);
    });
  } else if ((info.node.children || []).length > 0 && info.node.expanded && dropPosition === 1) {
    loop(data, dropKey!, (item: NTree.IDataNode) => {
      item.children = item.children || [];
      item.children.unshift(dragObj);
    });
  } else {
    let ar: NTree.IDataNode[] = [];
    let i = 0;
    loop(data, dropKey!, (_item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
      ar = arr;
      i = index;
    });
    if (dropPosition === -1) {
      ar.splice(i, 0, dragObj!);
    } else {
      ar.splice(i + 1, 0, dragObj!);
    }
  }

  treeData.value = data;
};
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree :tree-data="treeData" :draggable="{ icon: true }" block-node @drop="onDrop" />
  </div>
</template>

Виртуальная прокрутка

Виртуальный список включён по умолчанию (проп virtual). Задайте height — и дерево прокручивается внутри фиксированной высоты, рендеря только видимые узлы: тысячи строк не тормозят страницу.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref, watch } from 'vue';

const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);

watch(selectedKeys, () => console.log('selectedKeys', unref(selectedKeys)));
watch(checkedKeys, () => console.log('checkedKeys', unref(checkedKeys)));

const dig = (path = '0', level = 3): NTree.IDataNode[] => {
  const list: NTree.IDataNode[] = [];
  for (let i = 0; i < 10; i += 1) {
    const key = `${path}-${i}`;
    const treeNode: NTree.IDataNode = { title: key, key };
    if (level > 0) {
      treeNode.children = dig(key, level - 1);
    }
    list.push(treeNode);
  }
  return list;
};
const treeData = dig();
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree
      v-model:selected-keys="selectedKeys"
      v-model:checked-keys="checkedKeys"
      :tree-data="treeData"
      :height="300"
      default-expand-all
      checkable
    />
  </div>
</template>

Режим директорий

CdsTreeDirectory — дерево с предустановками под файлы и папки: иконки директорий, раскрытие по клику и растянутые на всю ширину узлы. Принимает те же пропсы, что и CdsTree.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTreeDirectory } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Новая папка',
    key: '0-0',
    children: [
      { title: 'index.ts', key: '0-0-0', isLeaf: true },
      { title: 'index.html', key: '0-0-1', isLeaf: true }
    ]
  },
  {
    title: 'Другая папка',
    key: '0-1',
    children: [
      { title: 'skuff.png', key: '0-1-0', isLeaf: true },
      { title: 'newFile.md', key: '0-1-1', isLeaf: true }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0']);
const selectedKeys = ref<string[]>([]);
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTreeDirectory
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      :tree-data="treeData"
      multiple
    />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Выбор разделов для выгрузки

Чекбоксы собирают набор разделов, счётчик в кнопке подсказывает объём выборки. Свойство loading кнопки показывает ход выгрузки, disabled не даёт запустить её с пустым выбором.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsButton, CdsTree } from '@central-design-system/components';
import { computed, ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Электроника',
    key: 'electronics',
    children: [
      { title: 'Ноутбуки', key: 'laptops' },
      { title: 'Мониторы', key: 'monitors' }
    ]
  },
  {
    title: 'Мебель',
    key: 'furniture',
    children: [
      { title: 'Столы', key: 'tables' },
      { title: 'Кресла', key: 'chairs' }
    ]
  },
  { title: 'Канцтовары', key: 'stationery' }
];

const checkedKeys = ref<NTree.TKey[]>([]);
const loading = ref(false);
const exportedCount = ref(0);

const count = computed(() => checkedKeys.value.length);

const onExport = () => {
  loading.value = true;
  exportedCount.value = 0;

  setTimeout(() => {
    exportedCount.value = count.value;
    checkedKeys.value = [];
    loading.value = false;
  }, 1500);
};
</script>

<template>
  <div class="m-auto flex w-[280px] flex-col gap-2">
    <CdsTree v-model:checked-keys="checkedKeys" :tree-data="treeData" default-expand-all checkable />

    <CdsButton :text="`Выгрузить разделы (${count})`" :loading="loading" :disabled="!count" @click="onExport" />

    <span v-if="exportedCount" class="text-center text-content-secondary">
      Выгружено разделов: {{ exportedCount }}
    </span>
  </div>
</template>

Поиск по дереву

Поле ввода фильтрует tree-data на лету: в дереве остаются совпадения и их родители, а v-model:expanded-keys раскрывает ветки с найденными узлами. Если совпадений нет — показываем пустое состояние вместо дерева.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTextInput, CdsTree } from '@central-design-system/components';
import { computed, ref, watch } from 'vue';

const structure: NTree.IDataNode[] = [
  {
    title: 'Компания',
    key: 'company',
    children: [
      {
        title: 'Коммерческий департамент',
        key: 'commercial',
        children: [
          { title: 'Отдел продаж', key: 'sales' },
          { title: 'Отдел закупок', key: 'purchases' }
        ]
      },
      {
        title: 'ИТ-департамент',
        key: 'it',
        children: [
          { title: 'Разработка', key: 'development' },
          { title: 'Поддержка', key: 'support' }
        ]
      },
      {
        title: 'Финансовый департамент',
        key: 'finance',
        children: [{ title: 'Бухгалтерия', key: 'accounting' }]
      }
    ]
  }
];

const query = ref('');
const expandedKeys = ref<NTree.TKey[]>(['company']);

const filterNodes = (nodes: NTree.IDataNode[], text: string): NTree.IDataNode[] =>
  nodes.flatMap((node) => {
    const children = filterNodes(node.children ?? [], text);
    const matched = String(node.title).toLowerCase().includes(text);

    if (!matched && !children.length) return [];

    return [{ ...node, children: children.length ? children : node.children }];
  });

const treeData = computed(() => {
  const text = query.value.trim().toLowerCase();

  return text ? filterNodes(structure, text) : structure;
});

const collectParentKeys = (nodes: NTree.IDataNode[]): NTree.TKey[] =>
  nodes.flatMap((node) =>
    node.children?.length && node.key != null ? [node.key, ...collectParentKeys(node.children)] : []
  );

watch(treeData, (nodes) => {
  if (query.value.trim()) {
    expandedKeys.value = collectParentKeys(nodes);
  }
});
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-2">
    <CdsTextInput
      v-model="query"
      placeholder="Найти подразделение"
      prepend-inner-icon="search"
      clearable
      hide-messages
    />

    <CdsTree v-if="treeData.length" v-model:expanded-keys="expandedKeys" :tree-data="treeData" />

    <span v-else class="text-center text-content-secondary">Ничего не найдено</span>
  </div>
</template>

Файлы проекта

CdsTreeDirectory с v-model:selected-keys работает как проводник: клик по папке раскрывает её, клик по файлу выбирает его. Ключи узлов хранят путь к файлу, поэтому выбранный элемент сразу готов к показу или запросу.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTreeDirectory } from '@central-design-system/components';
import { computed, ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'src',
    key: 'src',
    children: [
      {
        title: 'components',
        key: 'src/components',
        children: [
          { title: 'AppHeader.vue', key: 'src/components/AppHeader.vue', isLeaf: true },
          { title: 'AppFooter.vue', key: 'src/components/AppFooter.vue', isLeaf: true }
        ]
      },
      { title: 'main.ts', key: 'src/main.ts', isLeaf: true }
    ]
  },
  {
    title: 'public',
    key: 'public',
    children: [{ title: 'favicon.svg', key: 'public/favicon.svg', isLeaf: true }]
  },
  { title: 'package.json', key: 'package.json', isLeaf: true }
];

const expandedKeys = ref<NTree.TKey[]>(['src']);
const selectedKeys = ref<NTree.TKey[]>([]);

const findNode = (nodes: NTree.IDataNode[], key: NTree.TKey): NTree.IDataNode | undefined => {
  for (const node of nodes) {
    if (node.key === key) return node;

    const child = findNode(node.children ?? [], key);
    if (child) return child;
  }

  return undefined;
};

const selectedFile = computed(() => {
  const key = selectedKeys.value[0];
  if (key === undefined) return undefined;

  const node = findNode(treeData, key);

  return node?.isLeaf ? String(key) : undefined;
});
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-2">
    <CdsTreeDirectory v-model:expanded-keys="expandedKeys" v-model:selected-keys="selectedKeys" :tree-data="treeData" />

    <span class="text-center text-content-secondary">
      {{ selectedFile ? `Открыт файл: ${selectedFile}` : 'Выберите файл' }}
    </span>
  </div>
</template>

API

CdsTree

Пропсы

Имя	Тип	По умолчанию	Описание
allowDrop	NTree.TAllowDrop<NTree.IDataNode> | undefined	true	Разрешает сброс на узле
autoExpandParent	boolean | undefined	false	Автоматически раскрывать родительский узел
blockNode	boolean | undefined	false	Узел дерева заполняет все оставшееся горизонтальное пространство
checkable	boolean | undefined	false	Добавляет checkbox перед узлами дерева
checkedKeys	NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; } | undefined	—	(v-model) Определяет ключи выбранных узлов дерева. Когда указан ключ узла дерева, который также является родительским узлом дерева, все дочерние узлы дерева будут checked; и наоборот, когда указан ключ узла дерева, который является дочерним узлом дерева, его родительский узел дерева также будет checked. Когда checkable и checkStrictly равны true, объект имеет свойство checked и halfChecked. Независимо от того, проверяется ли дочерний или родительский узел дерева, они не будут влиять друг на друга.
checkStrictly	boolean | undefined	false	Выбирает только родительский узел.
defaultExpandAll	boolean | undefined	false	Раскрывать все узлы по умолчанию
defaultExpandedKeys	NTree.TKey[] | undefined	[]	Раскрывать все узлы по умолчанию
defaultExpandParent	boolean | undefined	true	Раскрывать родительские узлы по умолчанию
defaultSelectedKeys	NTree.TKey[] | undefined	—	Выбранные узлы дерева по умолчанию
disabled	boolean | null | undefined	null	Заблокированное состояние
draggable	boolean | NTree.TDraggableConfig | undefined	false	Разрешает перетаскивание узлов дерева
expandAction	NTree.TExpandAction | undefined	—	Действие, которое будет раскрывать/скрывать узлы дерева
expandedKeys	NTree.TKey[] | undefined	—	(v-model) Определяет ключи раскрытых узлов дерева.
fieldNames	NTree.IFieldNames | undefined	—	Заменяет поля title, key и children в treeNode на соответствующие поля в treeData
filterTreeNode	((treeNode: NTree.IEventDataNode) => boolean) | undefined	—	Функция для фильтрации (выделения) узлов дерева. Когда функция возвращает true, узел дерева будет выделен.
height	number | undefined	—	Высота виртуального списка для прокрутки
icon	((nodeProps: NTree.ITreeNodeAttribute) => any) | undefined	—	Иконка узла дерева (также доступно через slot#icon)
loadData	((treeNode: NTree.IEventDataNode) => Promise<any>) | undefined	—	Загружает данные для узла дерева асинхронно
loadedKeys	NTree.TKey[] | undefined	[]	Загруженные узлы дерева. Необходимо для работы с loadData
multiple	boolean | undefined	false	Множественный выбор узлов дерева
openAnimation	Function | undefined	—	Функция анимации открытия/закрытия узла дерева
selectable	boolean | undefined	false	Выбираемые узлы дерева
selectedKeys	NTree.TKey[] | undefined	—	(v-model) Определяет ключи выбранных узлов дерева.
showIcon	boolean | undefined	false	Показывает иконку узла дерева
showLine	boolean | { showLeafIcon: string | boolean; } | undefined	—	Показывает линии между узлами дерева
switcherIcon	((nodeProps: SwitcherIconProps) => any) | undefined	—	Иконка открытия/закрытия узла дерева (также доступно через slot#switcherIcon)
theme	string | undefined	—	Тема компонента
treeData	NTree.IDataNode[] | undefined	—	Данные дерева
virtual	boolean | undefined	true	Включает виртуальную прокрутку списка в дереве, по-умолчанию включено

События

Имя	Тип	Описание
check	[checked: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }, info: NTree.ICheckInfo]	Событие выбора узла по чекбоксу.
click	[event: MouseEvent, node: NTree.IEventDataNode]	Событие клика по узлу.
dblclick	[event: MouseEvent, node: NTree.IEventDataNode]	Событие двойного клика по узлу.
doubleclick	[event: MouseEvent, node: NTree.IEventDataNode]	Событие двойного клика по узлу (алиас).
dragend	[info: NTree.TNodeDragEventParams]	Событие окончания перетаскивания узла.
dragenter	[info: NTree.TNodeDragEventParams & { expandedKeys: NTree.TKey[]; }]	Событие входа узла в зону перетаскивания.
dragleave	[info: NTree.TNodeDragEventParams]	Событие выхода узла из зоны перетаскивания.
dragover	[info: NTree.TNodeDragEventParams]	Событие перемещения узла в зоне перетаскивания.
dragstart	[info: NTree.TNodeDragEventParams]	Событие начала перетаскивания узла.
drop	[info: NTree.TNodeDragEventParams & { dragNode: NTree.IEventDataNode; dragNodesKeys: NTree.TKey[]; dropPosition: number; dropToGap: boolean; }]	Событие перемещения узла (drop).
expand	[expandedKeys: NTree.TKey[], info: { node: NTree.IEventDataNode; expanded: boolean; nativeEvent: MouseEvent; }]	Событие раскрытия узла.
load	[loadedKeys: NTree.TKey[], info: { event: "load"; node: NTree.IEventDataNode; }]	Событие загрузки узла (async loadData).
rightClick	[info: { event: MouseEvent; node: NTree.IEventDataNode; }]	Событие правого клика по узлу.
select	[selectedKeys: NTree.TKey[], info: { event: "select"; selected: boolean; node: NTree.IEventDataNode; selectedNodes: NTree.IDataNode[]; nativeEvent: MouseEvent; }]	Событие выбора узла.
update:checkedKeys	[checkedKeys: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }]	Событие выбора узла по чекбоксу (v-model).
update:expandedKeys	[expandedKeys: NTree.TKey[]]	Событие раскрытия узла (v-model).
update:selectedKeys	[selectedKeys: NTree.TKey[]]	Событие выбора узла (v-model).

Слоты

Имя	Тип	Описание
default	any	Узлы дерева по умолчанию (при декларативном описании через разметку).
icon	NTree.ITreeNodeAttribute	Кастомная иконка узла дерева.
switcherIcon	any	Кастомная иконка раскрытия/скрытия узла (переключатель).
title	NTree.IEventDataNode	Кастомный заголовок узла дерева.

Exposed

Имя	Тип	Описание
halfCheckedKeys	any	Ключи узлов с частично отмеченными потомками — состояние «наполовину выбран».
loadingKeys	any	Ключи узлов, для которых сейчас идёт ленивая подгрузка потомков.
scrollTo	ScrollTo	Прокручивает дерево к узлу по ключу или к указанной позиции.
treeRef	any	Ссылка на внутренний экземпляр дерева.

CdsTreeDirectory

Пропсы

Имя	Тип	По умолчанию	Описание
allowDrop	NTree.TAllowDrop<NTree.IDataNode> | undefined	true	Разрешает сброс на узле
autoExpandParent	boolean | undefined	false	Автоматически раскрывать родительский узел
blockNode	boolean | undefined	false	Узел дерева заполняет все оставшееся горизонтальное пространство
checkable	boolean | undefined	false	Добавляет checkbox перед узлами дерева
checkedKeys	NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; } | undefined	—	(v-model) Определяет ключи выбранных узлов дерева. Когда указан ключ узла дерева, который также является родительским узлом дерева, все дочерние узлы дерева будут checked; и наоборот, когда указан ключ узла дерева, который является дочерним узлом дерева, его родительский узел дерева также будет checked. Когда checkable и checkStrictly равны true, объект имеет свойство checked и halfChecked. Независимо от того, проверяется ли дочерний или родительский узел дерева, они не будут влиять друг на друга.
checkStrictly	boolean | undefined	false	Выбирает только родительский узел.
defaultExpandAll	boolean | undefined	false	Раскрывать все узлы по умолчанию
defaultExpandedKeys	NTree.TKey[] | undefined	[]	Раскрывать все узлы по умолчанию
defaultExpandParent	boolean | undefined	true	Раскрывать родительские узлы по умолчанию
defaultSelectedKeys	NTree.TKey[] | undefined	—	Выбранные узлы дерева по умолчанию
draggable	boolean | NTree.TDraggableConfig | undefined	false	Разрешает перетаскивание узлов дерева
expandAction	string | false | undefined	—	Действие, которое будет раскрывать/скрывать узлы дерева
expandedKeys	NTree.TKey[] | undefined	—	(v-model) Определяет ключи раскрытых узлов дерева.
fieldNames	NTree.IFieldNames | undefined	—	Заменяет поля title, key и children в treeNode на соответствующие поля в treeData
filterTreeNode	((treeNode: NTree.IEventDataNode) => boolean) | undefined	—	Функция для фильтрации (выделения) узлов дерева. Когда функция возвращает true, узел дерева будет выделен.
height	number | undefined	—	Высота виртуального списка для прокрутки
icon	((nodeProps: NTree.ITreeNodeAttribute) => any) | undefined	—	Иконка узла дерева (также доступно через slot#icon)
loadData	((treeNode: NTree.IEventDataNode) => Promise<any>) | undefined	—	Загружает данные для узла дерева асинхронно
loadedKeys	NTree.TKey[] | undefined	[]	Загруженные узлы дерева. Необходимо для работы с loadData
multiple	boolean | undefined	false	Множественный выбор узлов дерева
openAnimation	Function | undefined	—	Функция анимации открытия/закрытия узла дерева
selectable	boolean | undefined	false	Выбираемые узлы дерева
selectedKeys	NTree.TKey[] | undefined	—	(v-model) Определяет ключи выбранных узлов дерева.
showIcon	boolean | undefined	false	Показывает иконку узла дерева
showLine	boolean | { showLeafIcon: string | boolean; } | undefined	—	Показывает линии между узлами дерева
switcherIcon	((nodeProps: SwitcherIconProps) => any) | undefined	—	Иконка открытия/закрытия узла дерева (также доступно через slot#switcherIcon)
treeData	NTree.IDataNode[] | undefined	—	Данные дерева
virtual	boolean | undefined	true	Включает виртуальную прокрутку списка в дереве, по-умолчанию включено

События

Имя	Тип	Описание
check	[checked: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }, info: NTree.ICheckInfo]	Событие выбора узла по чекбоксу.
click	[event: MouseEvent, node: NTree.IEventDataNode]	Событие клика по узлу.
dblclick	[event: MouseEvent, node: NTree.IEventDataNode]	Событие двойного клика по узлу.
doubleclick	[event: MouseEvent, node: NTree.IEventDataNode]	Событие двойного клика по узлу (алиас).
dragend	[info: NTree.TNodeDragEventParams]	Событие окончания перетаскивания узла.
dragenter	[info: NTree.TNodeDragEventParams & { expandedKeys: NTree.TKey[]; }]	Событие входа узла в зону перетаскивания.
dragleave	[info: NTree.TNodeDragEventParams]	Событие выхода узла из зоны перетаскивания.
dragover	[info: NTree.TNodeDragEventParams]	Событие перемещения узла в зоне перетаскивания.
dragstart	[info: NTree.TNodeDragEventParams]	Событие начала перетаскивания узла.
drop	[info: NTree.TNodeDragEventParams & { dragNode: NTree.IEventDataNode; dragNodesKeys: NTree.TKey[]; dragPosition: number; dropToGap: boolean; }]	Событие перемещения узла (drop).
expand	[expandedKeys: NTree.TKey[], info: { node: NTree.IEventDataNode; expanded: boolean; nativeEvent: MouseEvent; }]	Событие раскрытия узла.
load	[treeNode: NTree.IEventDataNode]	Событие загрузки узла (async loadData).
rightClick	[info: { event: MouseEvent; node: NTree.IEventDataNode; }]	Событие правого клика по узлу.
select	[selectedKeys: NTree.TKey[], info: { event: "select"; selected: boolean; node: NTree.IEventDataNode; selectedNodes: NTree.IDataNode[]; nativeEvent: MouseEvent; }]	Событие выбора узла.
update:checkedKeys	[checkedKeys: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }]	Событие выбора узла по чекбоксу (v-model).
update:expandedKeys	[expandedKeys: NTree.TKey[]]	Событие раскрытия узла (v-model).
update:selectedKeys	[selectedKeys: NTree.TKey[]]	Событие выбора узла (v-model).

CdsTreeNode

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Подсвечивает узел как активный
checkable	boolean | undefined	—	Показывает чекбокс у узла
data	NTree.IDataNode | undefined	undefined as unknown as NTree.IDataNode	Данные узла — исходный элемент списка, из которого построен узел
disableCheckbox	boolean | undefined	—	Блокирует только чекбокс узла, оставляя сам узел доступным
disabled	boolean | undefined	—	Блокирует узел: нельзя выделить, отметить или раскрыть
domRef	((arg: any) => void) | undefined	—	Колбэк, получающий DOM-элемент узла после монтирования
eventKey	NTree.TKey | undefined	''	Уникальный ключ узла — по нему дерево отслеживает выбор, раскрытие и отметку
icon	Function | undefined	—	Функция, возвращающая иконку узла
isEnd	boolean[] | undefined	—	Признаки «последний на своём уровне» для каждого уровня вложенности — по ним рисуются соединительные линии
isLeaf	boolean | undefined	—	Узел — лист: не имеет потомков и не показывает переключатель раскрытия
isStart	boolean[] | undefined	—	Признаки «первый на своём уровне» для каждого уровня вложенности — по ним рисуются соединительные линии
parent	NTree.IDataNode | undefined	undefined as unknown as NTree.IDataNode	Данные родительского узла. Для узлов верхнего уровня не задаётся
prefixCls	string | undefined	—	Префикс CSS-классов узла
selectable	boolean | undefined	—	Разрешает выделять узел
switcherIcon	Function | undefined	—	Функция, возвращающая иконку переключателя раскрытия узла
title	string | (Function & string) | undefined	—	Заголовок узла дерева: строка или рендер-функция