Vue.js 2 Tree Select Plugin

Vue.js 2 Tree Select Plugin

A hierarchical tree select plugin for Vue2.0+ applications.

vue-treeselect

npm

Introduction

A tree plugin for vue2

This Plugin is based on vue-jstree, Some "props" can be used for reference !

DEMO

http://zdy1988.github.io/vue-treeselect

NPM

    npm install vue-treeselect

ES6

    import VTreeselect from 'vue-treeselect'
    
    new Vue({
      components: {
        VTreeselect
      }
    })

Setup

    npm install
    npm run dev

Usage

    <v-tree-select :data="data" value-field-name="id" v-model="selectItem"></v-tree-select>
    
      new Vue({
        el: '#app',
        data: {
          data: [
            {
              "id": 1,
              "text": "Same but with checkboxes",
              "children": [
                {
                  "id": 2,
                  "text": "initially selected",
                },
                {
                  "id": 3,
                  "text": "custom icon",
                },
                {
                  "id": 4,
                  "text": "initially open",
                  "children": [
                    {
                      "id": 5,
                      "text": "Another node"
                    }
                  ]
                },
                {
                  "id": 6,
                  "text": "custom icon",
                },
                {
                  "id": 7,
                  "text": "disabled node",
                  "disabled": true
                }
              ]
            },
            {
              "id": 8,
              "text": "Same but with checkboxes",
              "children": [
                {
                  "id": 9,
                  "text": "initially selected",
                },
                {
                  "id": 10,
                  "text": "custom icon",
                },
                {
                  "id": 11,
                  "text": "initially open",
                  "children": [
                    {
                      "id": 12,
                      "text": "Another node"
                    }
                  ]
                },
                {
                  "id": 13,
                  "text": "custom icon",
                },
                {
                  "id": 14,
                  "text": "disabled node",
                  "disabled": true
                }
              ]
            },
            {
              "id": 15,
              "text": "And wholerow selection"
            }
          ],
          selectItem: null
        }
      })

API

Props Type Default Describe
placeholder String set placeholder
data Array set tree data
size String set tree item size , value : 'large' or '' or ''small'
show-checkbox Boolean false set it show checkbox
allow-transition Boolean true allow use transition animation
whole-row Boolean false use whole row state
no-dots Boolean false show or hide dots
multiple Boolean false set multiple selected tree item
allow-batch Boolean false in multiple choices. allow batch select
text-field-name String 'text' set tree item display field
value-field-name String 'value' set tree item value field
children-field-name String 'children' set tree item children field
async Function async load callback function , if node is a leaf ,you can set 'isLeaf: true' in data
loading-text String 'Loading' set loading text
klass String set append tree class

Data Item Optional Properties

Name Type Default Describe
icon String custom icon css class
opened Boolean false set leaf opened
selected Boolean false set node selected
disabled Boolean false set node disabled
isLeaf Boolean false if node is a leaf , set true can hide '+'

Github Repository

Tags: #VueJs