Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Vue Tree View Component

Support Vue.js 2.0+


Add the following required resources.

<link rel="stylesheet" href="[You Path]font-awesome/4.+/css/font-awesome.min.css">
<link rel="stylesheet" href="src/tree.vue.css">

<script src="[You Path]vue.js"></script>
<script src="src/tree.vue.js"></script>

Add the component in your vue view.

<div id="app">
    <vue-tree :option="option"></vue-tree>
    new Vue({
        el: '#app',
        data: {
            option: {
                root: { //Root Node, see Node Options
                    name: 'Root Node',
                    isParent: true,
                    isOpen: true,
                    children: []

Node Options

[opt] means optional property.

  name: 'Node Name',
  title: 'Node Tag title attr',
  isParent: true, // Requested for parent node
  isOpen: false, // [opt] Control node to fold or unfold
  icon: 'fa fa-folder', //[opt] Icon class name
  openedIcon: 'fa fa-folder-open', // [opt] For parent. Show when isOpen == true, show icon if it's null or empty 
  closedIcon: 'fa fa-folder', // [opt] For parent. Show when isOpen != true, show icon if it's null or empty 
  children: [], // Requested for parent node
  buttons: [ // [opt]
      title: 'icon button tag title attr', //[opt]
      icon: 'fa fa-edit',
      click: function (node) { //[opt]
  showLoading: false, // [opt] For parent, when `node.showLoading && node._loading` and node is opened then show loading icon
  onOpened: function (node) {}, // [opt]
  onClosed: function (node) {} // [opt]


Copyright (c) 2016 weibangtuo. Under MIT License.