Слияние кода завершено, страница обновится автоматически
Виртуализированное дерево, основанное на компоненте TreeV2 из библиотеки element-plus. Независимо от объёма данных, виртуализированное дерево может обрабатывать их без нагрузки.
npm install @sangtian152/virtual-tree --save
# или
yarn add @sangtian152/virtual-tree
import Vue from 'vue';
import VlTree from '@sangtian152/virtual-tree';
import "@sangtian152/virtual-tree/lib/vl-tree.css";
Vue.use(VlTree);
| Атрибут | Описание | Тип | По умолчанию |
|---|---|---|---|
| data | Данные для отображения | array | — |
| empty-text | Текст, который отображается, когда данные пусты | string | — |
| props | Параметры конфигурации, см. таблицу ниже | object | — |
| highlight-current | Выделять текущий выбранный узел | boolean | false |
| expand-on-click-node | Разворачивать или сворачивать узел при клике на него. По умолчанию true, если false, то только при нажатии на стрелку узла происходит разворачивание или сворачивание | boolean | true |
| check-on-click-node | Выбирать узел при клике на него. Значение по умолчанию false, т. е. выбор происходит только при клике на флажок узла | boolean | false |
| default-expanded-keys | Массив ключей узлов, которые развёрнуты по умолчанию | array | — |
| show-checkbox | Разрешить выбор узлов | boolean | false |
| check-strictly | В режиме отображения флажков строго следовать принципу «родитель не связан с потомком» (по умолчанию false) | boolean | false |
| default-checked-keys | Массив ключей узлов, отмеченных галочкой по умолчанию | array | — |
| current-node-key | Ключ текущего выбранного узла | string, number | — |
| filter-method | Метод фильтрации узлов дерева. Возвращает true, если узел должен быть отображён, и false, если он должен быть скрыт | Function(value, data) | — |
| indent | Горизонтальный отступ между соседними уровнями узлов, в пикселях | number | 16 |
| icon | Пользовательский значок для узлов дерева | string / Component | - |
| ---------- | ------------------------------------------------------------------------------ | ----------- | ------ |
| value | Каждый узел дерева используется как уникальное свойство, которое должно быть уникальным во всём дереве. | string, number | id |
| label | Указывает значение атрибута для метки узла. | string | label |
| children | Указывает значение атрибута для дочернего дерева. | string | children |
| disabled | Указывает, будет ли отключён выбор узла (disabled). | string | disabled |
VirtualTree использует объекты типа TreeNode для упаковки данных, предоставленных пользователем, и построения отношений между узлами дерева. VirtualTree предоставляет следующие методы:
| Метод | Описание | Параметры |
|---|---|---|
| filter | Операция фильтрации узлов дерева | (query: string) |
| getCheckedNodes | Возвращает массив узлов, которые в данный момент выбраны (если show-checkbox имеет значение true) | (leafOnly: boolean) |
| getCheckedKeys | Возвращает массив ключей выбранных в данный момент узлов (если show-checkbox имеет значение true) | (leafOnly: boolean) |
| setCheckedKeys | Устанавливает выбранные узлы с помощью ключей | (keys: TreeKey[]) |
| setChecked | Устанавливает состояние выбора узла с помощью ключа | (key: TreeKey, checked: boolean) |
| getHalfCheckedNodes | Возвращает массив полувыбранных узлов (если show-checkbox имеет значение true) | - |
| getHalfCheckedKeys | Возвращает массив ключей полувыбранных узлов (если show-checkbox имеет значение true) | - |
| getCurrentKey | Получает ключ текущего выбранного узла, возвращает undefined, если узел не выбран | - |
| getCurrentNode | Получает данные текущего выбранного узла, возвращает undefined, если узел не выбран | - |
| setCurrentKey | Устанавливает текущий выбранный узел с помощью ключа | (key: TreeKey) |
| setData | Устанавливает данные узла | (data: TreeData) |
| Название события | Описание | Параметры |
|---|---|---|
| node-click | Событие, которое происходит при нажатии на узел | (data: TreeNodeData, node: TreeNode, e: MouseEvent) |
| node-contextmenu | Событие, которое возникает при щелчке правой кнопкой мыши по узлу | (e: Event, data: TreeNodeData, node: TreeNode) |
| check-change | Обработчик изменения состояния выбора узла | (data: TreeNodeData, checked: boolean) |
| check | Событие, возникающее при нажатии на флажок | (data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData}) |
| current-change | Событие, происходящее при изменении текущего выбранного узла | (data: TreeNodeData, node: TreeNode) |
| node-expand | Событие, происходящее при расширении узла | (data: TreeNodeData, node: TreeNode) |
| node-collapse | Событие, происходящее при сворачивании узла | (data: TreeNodeData, node: TreeNode) |
| Имя | Описание |
|---|---|
| - | Содержимое пользовательского узла. Параметр области видимости: {node: TreeNode, data: TreeNodeData} |
| icon | Пользовательский значок расширения/сворачивания. Параметр области видимости: {node: TreeNode, data: TreeNodeData} |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )