TreeView for Vue.js
Upgraded to Vue 3
✨ Incoming Features
- Add customizable colours for each node, maybe even styles.
- Use
slotto customize look of node, like icons with images etc. (Will have to look intoslota bit more)
Any future suggestions are welcome
🎓 Usage
Install the package into your project:
npm install --save @ll931217/vue-treeview
or
yarn add @ll931217/vue-treeview
Add this to your main.js file:
import Vue from 'vue'
import TreeView from '@ll931217/vue-treeview'
Vue.use(TreeView)Then add this to where you want to use the treeview:
<tree-view :tree="tree">
🌲 Tree
The treeview takes in the prop tree, which is in the following structure:
[
{
"text": "Dogs",
"nodes": [{
"text": "Germany",
"nodes": [{
"text": "American Eskimo Dog",
"nodes": [{
"text": "Fluffy",
"link": {
"type": "link", // Type `link` will create an `Anchor` tag
"value": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/American_Eskimo_Dog_1.jpg/1920px-American_Eskimo_Dog_1.jpg" // URL of the link
}
}]
}, {
"text": "Bavarian Mountain Hound"
}, {
"text": "Boxer",
"nodes": [{
"text": "Rip (Router-link)",
"link": {
"type": "router-link", // Type `router-link` will create a router-link, duh.
"key": "path", // key to use when giving it the value, router-link(:to="{ path: '/d-ger-boxer-rip' }")
"value": "/d-ger-boxer-rip"
}
}, {
"text": "Mackenzie (Router-link)",
"link": {
"type": "router-link",
"key": "name",
"value": "d-ger-boxer-machenzie"
}
}]
}, {
"text": "Bullenbeisser"
}, {
"text": "Deutsche Bracke",
"nodes": [{
"text": "Mini",
"link": {
"type": "link",
"value": "https://animalsbreeds.com/wp-content/uploads/2015/07/Deutsche-Bracke.jpg"
}
}]
}]
}, {
"text": "France",
"nodes": [{
"text": "Ariegeois"
}, {
"text": "Artois Hound"
}]
}]
}, {
"text": "Cats",
"nodes": [
{
"text": "Russia",
"nodes": [{
"text": "Donskoy"
}, {
"text": "Kurilian Bobtail"
}]
}, {
"text": "Thailand",
"nodes": [{
"text": "Khao Manee"
}, {
"text": "Suphalak",
"nodes": [{
"text": "Moon",
"link": {
"type": "link",
"value": "https://www.pets4homes.co.uk/images/articles/4198/what-is-a-suphalak-cat-5947aefcd4845.jpg"
}
}]
}]
}
]
},
{ // >= v0.3.0
"text": "Standing Up",
"link": {
"type": "router-link",
"key": "path",
"value": "templink"
},
"icon": "cube",
"nodes": [
{
"text": "mixamo.com",
"link": {
"type": "router-link",
"key": "path",
"value": "templink"
},
"icon": "running"
}
]
}
]
Custom Icons
Default Icons
If you want to use custom icons, you can select them from FontAwesome 5, add them like this:
First download their packages (Solid icons are already available):
| Prop | Type | Required |
|---|---|---|
| tree | Array |
True |
| icons |
String | Object
|
False |
<template>
<div id="app">
<treeview :tree="tree" :icons="icons" />
</div>
</template>
<script>
import { faChessQueen } from '@fortawesome/free-solid-svg-icons'
import Tree from './tree.json
export default {
name: 'App',
data () {
return {
tree: Tree,
icons: {
closed: 'angle-up',
opened: 'angle-down',
default: faChessQueen
}
}
}
}
</script>Icon for a node
In your node, add an icon object, you can customise the icon for that specific node such as:
{
"text": "Barbet",
"icon": "surprise"
}Toggle whether to show parent node icons
Usage:
<treeview :tree.sync="tree" :editable="true" :show-parent-icon="{ parentShow: true, emptyParentShow: false }" />The above example will show all icons of parent nodes that has children nodes and hide all empty parent nodes.
NOTE: the prop show-parent-icon can be written as above or showParentIcon, its all up to you.
Default:
showParentIcon: {
type: Object,
default: () => ({
parentShow: false,
emptyParentShow: false
})
}NOTE: Parent nodes with link property will still show their icon. See the JSON tree above, the last object tree, the parent node has link property.
Draggable
<treeview :tree.sync="tree" :editable="true" :draggable="true" />
💯 Tips
Adding .sync to :tree would allow two-way binding for the tree data, if data changed in the child component it will be updated for the entire tree, this feature is good for if you want to save the tree if it changed:
<treeview :tree.sync="tree" />Double-click the parent node will allow you to add new node to the tree, only if editable prop is passed with the boolean value of true:
<treeview :tree.sync="tree" :editable="true" />This prop can be used for checking user accounts:
<treeview :tree.sync="tree" :editable="userAccount === 'ADMIN'" />