vue-treeselect

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 || collapse | Boolean | false | set all tree item collapse state | | 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 '+' |