A highly customizable Vuejs tree viewer for expanding/collapsing folder tree.
How to use it:
1. Import and register the component.
import Tree from 'vuejs-tree'
export default { components: { Tree }, };
2. Add the tree component to the template.
<template> <div> <Tree id="my-tree-id" ref="my-tree" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData" ></Tree> </div> </template>
export default { components: { Tree, }, data: function () { return { treeDisplayData: [ { text: "root 1", state: { checked: false, selected: false, expanded: false }, id: 1, checkable: false, nodes: [ { text: "Child 1", state: { checked: true, selected: false, expanded: false }, id: 3, nodes: [ { text: "Grandchild 1", state: { checked: false, selected: false, expanded: false }, id: 5, }, { text: "Grandchild 2", state: { checked: false, selected: false, expanded: false }, id: 6, }, ], }, { text: "Child 2", state: { checked: false, selected: false, expanded: false }, id: 4, }, ], }, { text: "Root 2", state: { checked: false, selected: false, expanded: false }, id: 2, }, ], }; }, computed: { myCustomStyles() { return { tree: { style: { height: "auto", maxHeight: "300px", overflowY: "visible", display: "inline-block", textAlign: "left", }, }, row: { style: { width: "500px", cursor: "pointer", }, child: { class: "", style: { height: "35px", }, active: { style: { height: "35px", }, }, }, }, rowIndent: { paddingLeft: "20px", }, text: { // class: "" // uncomment this line to overwrite the 'capitalize' class, or add a custom class style: {}, active: { style: { "font-weight": "bold", color: "#2ECC71", }, }, }, }; }, myCustomOptions() { return { treeEvents: { expanded: { state: false, }, collapsed: { state: false, }, selected: { state: true, fn: this.mySelectedFunction, }, checked: { state: true, fn: this.myCheckedFunction, }, }, events: { expanded: { state: true, }, selected: { state: true, }, checked: { state: true, }, editableName: { state: true, calledEvent: "expanded", }, }, addNode: { state: true, fn: this.addNodeFunction, appearOnHover: false, }, editNode: { state: false, fn: null, appearOnHover: false }, deleteNode: { state: true, fn: this.deleteNodeFunction, appearOnHover: true, }, showTags: true, }; }, }, mounted() { this.$refs["my-tree"].expandNode(1); }, methods: { myCheckedFunction: function (nodeId, state) { console.log(`is ${nodeId} checked ? ${state}`); console.log(this.$refs["my-tree"].getCheckedNodes("id")); console.log(this.$refs["my-tree"].getCheckedNodes("text")); }, mySelectedFunction: function (nodeId, state) { console.log(`is ${nodeId} selected ? ${state}`); console.log(this.$refs["my-tree"].getSelectedNode()); }, deleteNodeFunction: function (node) { const nodePath = this.$refs["my-tree"].findNodePath(node.id); const parentNodeId = nodePath.slice(-2, -1)[0]; if (parentNodeId === undefined) { // 'root' node const nodeIndex = this.$refs["my-tree"].nodes.findIndex((x) => x.id !== node.id) - 1; this.$refs["my-tree"].nodes.splice(nodeIndex, 1); } else { // child node const parentNode = this.$refs["my-tree"].findNode(parentNodeId); const nodeIndex = parentNode.nodes.findIndex((x) => x.id !== node.id) - 1; parentNode.nodes.splice(nodeIndex, 1); } console.log("example: remove node", node.id); }, addNodeFunction: function (node) { const newNode = { text: "Grandchild 2", id: Math.floor(Math.random() * 100), }; console.log("example: add node", newNode); if (node.nodes === undefined) { // the node doesn't have childs // I use $set to ensure that VueJs detect the change this.$set(node, "nodes", [newNode]); } else { node.nodes.push(newNode); } }, }, };
Preview:
Changelog:
v3.0.2 (02/25/2022)
- New features: Make icon_parent a style option class
- Fixes: Remove duplicate event call when checking a node
v3.0.1 (07/17/2021)
- Update for Vue 3
v2.0.3 (06/10/2021)
- Add the rowIndent key in the customOptions to change the css applied to each child’s <ul>. Mainly to be able to modify the tree node’s indentation.
- Add default text-align: left to prevent indentation to go haywire when the node’s text length is significantly different and there’s a text-align: center on the parents.
v2.0.1 (12/24/2020)
- Build package sources
- Add back the expandable, selectable and checkable options
Download Details:
Author: vinz3872
Live Demo: https://codesandbox.io/s/vue-template-lmbyx
Download Link: https://github.com/vinz3872/vuejs-tree/archive/refs/heads/master.zip
Official Website: https://github.com/vinz3872/vuejs-tree
Install & Download:
# Yarn
$ yarn add vuejs-tree
# NPM
$ npm install vuejs-tree --save