Vuetify

Магазин

Для бизнеса

The v-treeview component is useful for displaying large amounts of nested data.

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

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

Dense mode provides more compact layout with decreased heights of the items.

You can control the color of the selected node checkbox.

You can control the text and background color of the active treeview node.

Shaped treeview's have rounded borders on one side of the nodes.

You can make treeview nodes rounded.

Setting item-disabled prop allows to control which node's property disables the node when set to true.

Treeview now supports two different selection types. The default type is 'leaf', which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is 'independent', which allows one to select parent nodes, but each node is independent of its parent and children.

You can easily select treeview nodes and children.

Treeview nodes can be activated by clicking on them.

Treeview nodes can have a hover effect.

Treeview nodes can be pre-opened on page load.

Using slots we are able to create an intuitive file explorer. Apart from the prepend slot, there is also one for the label, and an append slot.

Легко фильтруйте ваш treeview используя search prop. Вы можете легко применить свою собственную функцию фильтрации (если вам нужна чувствительная к регистру или fuzzy фильтрация) установив filter prop. Это работает аналогично как v-autocomplete компонент.

Вы можете динамически загружать дочерние данные, предоставляя Promise callback для load-children prop. Этот callback будет выполнен при первой попытке пользователя расширить элемент у которого есть свойство children, которое является пустым массивом.

Настройте on, off и indeterminate иконки для вашего выбираемого дерева. Комбинируйте с другими продвинутыми возможностями, такими как элементы, загруженные через API.

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!