Vuejs-tree is a highly customizable and blazing fast Vue tree component introduced by Vincent Jacquier. It provides interactive trees that are easily extendable and customizable. You can view its demo here.

Installation

You can install this component by using yarn or Npm

yarn add vuejs-tree

or 

npm install vuejs-tree

Usage

Add the following lines at the top of your .js
file which contains your Vue instance.

  import Tree from 'vuejs-tree'


  // in your vue instance
  components: {
    'Tree': Tree
  },

Then add the following line in your HTML file to generate a tree. You can have as many trees per page as you want.

  <Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>

Data Structure

You need to define data to display which is a nested array of hash.

Example:
data: {
  treeDisplayData: [
    {
      text: 'Root 1',
      state: { checked: false, selected: false, expanded: false },
      nodes: [
        {
          text: 'Child 1',
          state: { checked: false, selected: false, expanded: false },
          nodes: [
            {
              text: 'Grandchild 1',
              state: { checked: false, selected: false, expanded: false }
            },
            {
              text: 'Grandchild 2',
              state: { checked: false, selected: false, expanded: false }
            }
          ]
        },
        {
          text: 'Child 2',
          state: { checked: false, selected: false, expanded: false }
        }
      ]
    },
    {
      text: 'Root 2',
      state: { checked: false, selected: false, expanded: false }
    }
  ]
}

Node properties

Here is a fully customized node:

{
  id: 1,
  text: 'Root 1',
  definition: 'First node',
  depth: 1,
  checkable: false,
  selectable: false,
  expandable: true,
  tags: [42],
  state: {
    checked: false,
    expanded: false,
    selected: false
  },
  nodes: [
    {},
    ...
  ]
}

The Following properties define a node-level css and behavior.

key	type	Detail
id	String or Integer --> Mandatory	Used in the tree to differentiate each node
text	String --> Mandatory	The text value displayed at the right of the node icons
definition	String --> Optional	If some text is given, then it will show as a tooltip
depth	Integer --> Optional	It corresponds to the node depth, starting from 0, 1 or anything. It’s advisable to fill these fields if some of your nodes have the same id
tags	[Integer] --> Optional	The tag is displayed at the right end of the line
checkable	Boolean --> Optional, default: true	Used to enable or disable the node’s check event
selectable	Boolean --> Optional, default: true	Used to enable or disable the node’s select event
expandable	Boolean --> Optional, default: true	Used to enable or disable the node’s expand event
state	-	nodes’s state
state.checked	Boolean --> Mandatory, default: false	Change the node’s default state (at initialize)
state.selected	Boolean --> Mandatory, default: false	Change the node’s default state (at initialize)
state.expanded	Boolean --> Mandatory, default: false	Change the node’s default state (at initialize)
nodes	Object --> Optional	Used to display the node’s children. Look above for a structure example

Options / Styles

Here is an example of a customOptions hash the tree can take. I suggest you use a vuejs computed function if you want to use a function pointer.

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: {
            class: 'custom_row_active_class',
            style: {
              height: '35px'
            }
          }
        }
      },
      addNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      editNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      deleteNode: {
        class: 'custom_class',
        style: {
          color: '#EE5F5B'
        }
      },
      selectIcon: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        },
        active: {
          class: 'custom_class',
          style: {
            color: '#2ECC71'
          }
        }
      },
      text: {
        style: {},
        class: 'capitalize',
        active: {
          style: {
            'font-weight': 'bold',
            color: '#2ECC71'
          }
        }
      }
    };
  },
  myCustomOptions() {
    return {
      treeEvents: {
        expanded: {
          state: true,
          fn: null,
        },
        collapsed: {
          state: false,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: true,
          fn: this.myCheckedFunction,
        }
      },
      events: {
        expanded: {
          state: true,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: false,
          fn: null,
        },
        editableName: {
          state: false,
          fn: null,
          calledEvent: null,
        }
      },
      addNode: { state: false, fn: null, appearOnHover: false },
      editNode: { state: true, fn: null, appearOnHover: true },
      deleteNode: { state: true, fn: null, appearOnHover: true },
      showTags: true,
    };
  }
},

Events

Tree

You can call your own function here by assigning a function pointer in the tree options and changing its state to true. These functions are called after all tree modifications.

onNodeSelected

Called when a node is selected. myCustomOptions.treeEvents.selected.fn

onNodeExpanded

Called when a node is expanded. myCustomOptions.treeEvents.expanded.fn
Or called when a node is collapsed.

myCustomOptions.treeEvents.collapsed.fn

onNodeChecked
Called when a node is collapsed. myCustomOptions.treeEvents.checked.fn

Tree row

You can call your own function here by assigning a function pointer in the tree options. It will replace the existing behavior of the tree for this event. You can also disable an event by changing its state to false.

toggleSelected

Called when a node is selected. myCustomOptions.events.selected.fn

toggleExpanded

Called when a node is expanded or collapsed. myCustomOptions.events.expanded.fn

toggleChecked

Called when a node is checked. myCustomOptions.events.checked.fn

editableName

You can call a special function if you assign it’s pointer in myCustomOptions.events.editableName.fn Or you can call an existing event by assigining it’s name in myCustomOptions.events.editableName.calledEvent

Example:

myCustomOptions.events.editableName.calledEvent = ‘selected’

You can view its methods and other options on Github.