Treeview
Компонент v-treeview полезен для отображения большого количества вложенных данных.
API
Позволяет пользователю пометить узел как активный, нажав на него
Синхронизируемая prop, позволяющая контролировать, какие узлы активны. Массив состоит из item-key каждого активного элемента.
Класс применяющийся к узлу, когда тот активен
Применяет тёмный вариант темы
Иконка, используемая для обозначения возможности открытия узла
Пользовательская функция фильтрации элементов. По умолчанию используется поиск без учета регистра по label элемента.
Применяет класс наведения при наведении мыши на узлы
Значок, используемый, когда узел находится в неопределенном состоянии
Свойство у предоставленных items которое содержит детей каждого элемента
Свойство для поставляемых items, используемое для отслеживания состояния узла. Значение этого свойства должно быть уникальным среди всех элементов.
Свойство для поставляемых items, содержащее текст метки
Массив элементов, используемых для построения дерева
Применяет светлый вариант темы
Функция, используемая при динамической загрузке детей. Если этот prop установлен, то функция будет работать если развернуть элемент, имеющий свойство item-children, которое является пустым массивом. Поддерживает возврат Promise.
Иконка, используемая, когда узел находится в состоянии загрузки
Когда true, позволяет пользователю иметь несколько активных узлов одновременно
Иконка используется, когда узел не выбран
Иконка, используемая при выборе конечного узла или когда полностью выбран узел ветви
Синхронизируемая prop которая позволяет контролировать, какие узлы открыты. Массив состоит из item-key каждого открытого элемента.
Когда true приведет к открытию всех узлов всех ветвей при mounted компонента
Когда true заставит узлы открываться щелчком в любом месте на нем, а не открываться только нажатием на значок расширения. При использовании этого prop с activatable вы не сможете пометить узлы с дочерними элементами как активные.
Когда true, заставит v-model, active.sync и open.sync возвращать весь объект, а не только ключ
Модель поиска для фильтрации результатов
Будет отображать флажок рядом с каждым узлом, позволяя им быть выбранными
Цвет флажка выбора
Применяет переход, когда узлы открываются и закрываются
Позволяет контролировать, какие узлы выбраны. Массив состоит из item-key каждого выбранного элемента. Используется с @input событием чтобы разрешить v-model биндинг.
Примеры
Поиск директории
Легко фильтруйте ваш treeview используя search prop. Вы можете легко применить свою собственную функцию фильтрации (если вам нужна чувствительная к регистру или fuzzy фильтрация) установив filter prop. Это работает аналогично как v-autocomplete компонент.
Scoped slots
Используя scoped slots мы можем создать интуитивно понятный файловый менеджер. Кроме слота prepend, есть также один для label, и append слот.
Асинхронные элементы
Вы можете динамически загружать дочерние данные, предоставляя Promise callback для load-children prop. Этот callback будет выполнен при первой попытке пользователя расширить элемент у которого есть свойство children, которое является пустым массивом.
Пользовательские иконки выбора
Настройте on, off и indeterminate иконки для вашего выбираемого дерева. Комбинируйте с другими продвинутыми возможностями, такими как элементы, загруженные через API.