Just another simple tree view component for Vue.js apps.
How to use it:
1. Import and register the treeview component.
import Vue from 'vue' import TreeView from '@ll931217/vue-treeview'
Vue.use(TreeView)
2. Add the component to your app.
<tree-view :tree="tree">
3. Define your tree structure as follows:
[ { "text": "JavaScript", "nodes": [{ "text": "React", "nodes": [{ "text": "React.js", "nodes": [{ "text": "React.js", "link": { "type": "link", // Type `link` will create an `Anchor` tag "value": "/path/to/url/" // URL of the link } }] }, { "text": "React Native" }] },{ "text": "Vue", "nodes": [{ "text": "Vue 2" }, { "text": "Vue3" }] }] }, { // >= v0.3.0 "text": "JavaScript", "link": { "type": "router-link", "key": "path", "value": "templink" }, "icon": "cube", "nodes": [ { "text": "Vanilla JavaScript", "link": { "type": "router-link", "key": "path", "value": "templink" }, "icon": "running" } ] } ]
4. Available component props.
tree: { type: Array, required: true, default: () => [] }, icons: { type: Object, default: () => ({ closed: "plus-square", opened: "minus-square", default: "truck-loading" }) }, editable: { type: Boolean, default: () => false }, expanded: { type: Boolean, default: () => false }, draggable: { type: Boolean, default: false }, showParentIcon: { type: Object, default: () => ({ parentShow: false, emptyParentShow: false, }) }
Preview:
Changelog:
v0.4.0 (06/27/2022)
- Refactor
v0.3.0 (03/27/2020)
- Parent nodes can become links
- Parent nodes and empty parent nodes can toggle whether to show icon
- Icons of EVERY node can be customisable
- Creating a new node by double clicking on empty parent nodes or double clicking on the +/- symbols
- Fixed a display issue where the text “Double click to create new node” is shown all the time
Download Details:
Author: ll931217
Live Demo: https://ll931217.github.io/vue-treeview/
Download Link: https://github.com/ll931217/vue-treeview/archive/master.zip
Official Website: https://github.com/ll931217/vue-treeview
Install & Download:
# Yarn
$ yarn add @ll931217/vue-treeview
# NPM
$ npm install @ll931217/vue-treeview --save