TreeView for Vue.js
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">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": "Dachshund" }, { "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": "Barbet" }, { "text": "Beagle-Harrier" }, { "text": "Beauceron" }, { "text": "Berger Picard" }, { "text": "Bloodhound" }] }] }, { "text": "Cats", "nodes": [{ "text": "Russia", "nodes": [{ "text": "Donskoy" }, { "text": "Kurilian Bobtail" }, { "text": "Mekong Bobtail" }, { "text": "Siberian" }] }, { "text": "Thailand", "nodes": [{ "text": "Khao Manee" }, { "text": "Korat" }, { "text": "Korn Ja" }, { "text": "Suphalak", "nodes": [{ "text": "Moon", "link": { "type": "link", "value": "https://www.pets4homes.co.uk/images/articles/4198/what-is-a-suphalak-cat-5947aefcd4845.jpg" } }] }] }] }] Custom 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: { prefix: 'fab', iconName: 'accessible-icon' } } } } } </script>Adding .sync to :tree would allow two-way binding for the tree data:
<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 can be used for checking user accounts:
<treeview :tree.sync="tree" :editable="userAccount === 'ADMIN'" />Draggable
<treeview :tree.sync="tree" :editable="true" :draggable="true" />Upcoming Features
-
Increase further customization with
styleprop -
Change icons
-
Add draggable feature
-
Add edit button next to nodes
-
Add option to create new child node on double click
-
Add
router-linkfunction to layer withvaluekey -
Able to change the key and value of the
router-linkobject
