vue-treeselect

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
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 '+'