Treeview

Компонент v-treeview полезен для отображения большого количества вложенных данных.

Применение

Основной пример

API

v-treeview
Имя
activatable
По умолчанию
false
Тип
boolean

Позволяет пользователю пометить узел как активный, нажав на него

Имя
active
По умолчанию
[]
Тип
array

Синхронизируемая prop, позволяющая контролировать, какие узлы активны. Массив состоит из item-key каждого активного элемента.

Имя
active-class
По умолчанию
'v-treeview-node--active'
Тип
string

Класс применяющийся к узлу, когда тот активен

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
expand-icon
По умолчанию
'$vuetify.icons.subgroup'
Тип
string

Иконка, используемая для обозначения возможности открытия узла

Имя
filter New in — v1.5
По умолчанию
null
Тип
function

Пользовательская функция фильтрации элементов. По умолчанию используется поиск без учета регистра по label элемента.

Имя
hoverable
По умолчанию
false
Тип
boolean

Применяет класс наведения при наведении мыши на узлы

Имя
indeterminate-icon
По умолчанию
'$vuetify.icons.checkboxIndeterminate'
Тип
string

Значок, используемый, когда узел находится в неопределенном состоянии

Имя
item-children
По умолчанию
'children'
Тип
string

Свойство у предоставленных items которое содержит детей каждого элемента

Имя
item-key
По умолчанию
'id'
Тип
string

Свойство для поставляемых items, используемое для отслеживания состояния узла. Значение этого свойства должно быть уникальным среди всех элементов.

Имя
item-text
По умолчанию
'name'
Тип
string

Свойство для поставляемых items, содержащее текст метки

Имя
items
По умолчанию
[]
Тип
array

Массив элементов, используемых для построения дерева

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
load-children
По умолчанию
null
Тип
function

Функция, используемая при динамической загрузке детей. Если этот prop установлен, то функция будет работать если развернуть элемент, имеющий свойство item-children, которое является пустым массивом. Поддерживает возврат Promise.

Имя
loading-icon
По умолчанию
'$vuetify.icons.loading'
Тип
string

Иконка, используемая, когда узел находится в состоянии загрузки

Имя
multiple-active
По умолчанию
false
Тип
boolean

Когда true, позволяет пользователю иметь несколько активных узлов одновременно

Имя
off-icon
По умолчанию
'$vuetify.icons.checkboxOff'
Тип
string

Иконка используется, когда узел не выбран

Имя
on-icon
По умолчанию
'$vuetify.icons.checkboxOn'
Тип
string

Иконка, используемая при выборе конечного узла или когда полностью выбран узел ветви

Имя
open
По умолчанию
[]
Тип
array

Синхронизируемая prop которая позволяет контролировать, какие узлы открыты. Массив состоит из item-key каждого открытого элемента.

Имя
open-all
По умолчанию
false
Тип
boolean

Когда true приведет к открытию всех узлов всех ветвей при mounted компонента

Имя
open-on-click
По умолчанию
false
Тип
boolean

Когда true заставит узлы открываться щелчком в любом месте на нем, а не открываться только нажатием на значок расширения. При использовании этого prop с activatable вы не сможете пометить узлы с дочерними элементами как активные.

Имя
return-object
По умолчанию
false
Тип
boolean

Когда true, заставит v-model, active.sync и open.sync возвращать весь объект, а не только ключ

Имя
search New in — v1.5
По умолчанию
undefined
Тип
string

Модель поиска для фильтрации результатов

Имя
selectable
По умолчанию
false
Тип
boolean

Будет отображать флажок рядом с каждым узлом, позволяя им быть выбранными

Имя
selected-color
По умолчанию
'accent'
Тип
string

Цвет флажка выбора

Имя
transition
По умолчанию
false
Тип
boolean

Применяет переход, когда узлы открываются и закрываются

Имя
value
По умолчанию
[]
Тип
array

Позволяет контролировать, какие узлы выбраны. Массив состоит из 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.

Edit this page | language on Github