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.

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.