A simple yet full-featured and highly customizable tree view component for Vue.
More Features:
- Works in modern browsers using the precompiled scripts, or can be included in your babel/webpack chain.
- Expandable nodes
- Checkboxes
- Radio buttons
- Node selection
- Addition and removal of nodes
- Slots for node content
- Skinning
- Asynchronous loading of child nodes
- Follows ARIA guidelines for treeview accessibility
- Drag and drop (single nodes, works between trees)
See Also:
How to use it:
1. Import the vue-tree.
import TreeView from "@grapoza/vue-tree"
2. Register the component.
export default { components: { TreeView } }
3. Add the tree view component to the app template.
<template> <tree-view id="example" :initial-model="dataModel"></tree-view> </template>
4. Add nodes to the tree view.
export default { components: { TreeView }, data() { return { dataModel: [ {id: "numberOrString", label: "Root Node", children: [ {id: 1, label: "Child Node"}, {id: 2, label: "Second Child"}] } ] } } }
5. All default tree props.
initialModel: { type: Array, required: true }, modelDefaults: { type: Object, required: false, default: function () { return {}; } }, selectionMode: { // none, 'single', 'selectionFollowsFocus', or 'multiple' type: String, required: false, default: SelectionMode.None, validator: function (value) { return Object.values(SelectionMode).includes(value); } }, skinClass: { type: String, required: false, default: 'default-tree-view-skin', validator: function (value) { return value === null || !value.match(/\s/); } }
Preview:
Changelog:
v5.2.0 (04/16/2022)
- Update
v5.1.0 (02/04/2022)
- Add dataTransferEffectAllowed to TNS
- Refactor composables
- Update packages (manual clear of yarn.lock)
- Fix exclusive node selection
v5.0.1 (02/05/2022)
- Add dataTransferEffectAllowed to TNS
- Refactor composables
- Fix exclusive node selection
v5.0.0 (09/17/2022)
- Code has been refactored to use the Composition API and composables (the composables will be refactored further in a future release).
- Add maxMatches parameter to getMatching
- A treeNodeChildCheckboxChange event is now fired by a node when its child is checked/unchecked
v4.0.3 (03/06/2022)
- Remove SASS dependency
v4.0.2 (11/03/2021)
- Bugfix
v4.0.0 (10/07/2021)
- Remove IE11
- Update treeview to Vue 3
- Add shallow_clone: true for automation
- Move node normalization to a mixin
v3.0.3 (06/21/2021)
- Updates dependency versions for security and stability fixes.
v3.0.2 (06/02/2021)
- Updates dependency versions for security and stability fixes.
v3.0.1 (05/17/2021)
- Updates dependency versions for security and stability fixes.
v3.0.0 (03/23/2021)
- Add wrapper div around children div and loading message
- Separate behaviors for expandable and state.expanded
- Make event names use present tense
- Move areChildrenLoading and and areChildrenLoaded into private state
- Add asynchronous loading for the initial model
Download Details:
Author: grapoza
Live Demo: https://grapoza.github.io/vue-tree/5.1.0/?path=/docs/examples-treeview--add-remove
Download Link: https://github.com/grapoza/vue-tree/archive/master.zip
Official Website: https://github.com/grapoza/vue-tree
Install & Download:
# Yarn
$ yarn add @grapoza/vue-tree
# NPM
$ npm i @grapoza/vue-tree