Description:
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.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