vue-jstree

A tree plugin for vue2.

vue-jstree

NPM

    npm install vue-jstree
HTML

ES6

    import VJstree from 'vue-jstree'
    
    new Vue({
      components: {
        VJstree
      }
    })
HTML

Setup

    npm install
    npm run dev
HTML

Usage

    <v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
    
    new Vue({
      data: {
        data: [
          {
            "text": "Same but with checkboxes",
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "Same but with checkboxes",
            "opened": true,
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "And wholerow selection"
          }
        ]
      },
      methods: {
        itemClick (node) {
          console.log(node.model.text + ' clicked !')
        }
      }
    })
HTML

API

Props Type Default
data Array
size String
showCheckbox Boolean false
wholeRow Boolean false
noDots Boolean false
multiple Boolean false
allowBatch Boolean false
textFieldName Boolean 'text'
valueFieldName Boolean 'value'
async Function
loadingText String 'Loading'
draggable Boolean false
klass String

Methods in node.model

Method Params
addChild (object) newDataItem
addAfter (object) newDataItem, (object) selectedNode
addBefore (object) newDataItem, (object) selectedNode
openChildren
closeChildren

Event

@item-click

@item-toggle

Data Item Optional Properties

Name Type Default
icon String
opened Boolean false
selected Boolean false
disabled Boolean false

GitHub

A Tree Plugin For Vue2.0+Read More

Latest commit to the master branch on 9-22-2023
Download as zip