vue-jstree


English/中文

Introduction

A tree plugin for vue2

DEMO

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

NPM

``html
npm install vue-jstree
`

ES6

`html
import VJstree from 'vue-jstree'

new Vue({
components: {
VJstree
}
})
`

Setup

`html
npm install
npm run dev
`

Usage

`html


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 !')
}
}
})
`

API

| Props | Type | Default | Describe |
| ------------- |:-------------:|:-----:|:--------------------------------------------------------|
| data | Array | | set tree data |
| size | String | | set tree item size , value : 'large' or '' or ''small' |
| show-checkbox | Boolean | false | |
| allow-transition | Boolean | true | |
| whole-row | Boolean | false | |
| no-dots | Boolean | false | |
| collapse | Boolean | false | set all tree item collapse state |
| multiple | Boolean | false | set multiple selected tree item |
| allow-batch | Boolean | false | |
| 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 |
| item-events | Object | {} | register any event to tree item, example |
| 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 |
| draggable | Boolean | false | set tree item can be dragged , selective drag and drop can set 'dragDisabled: true' and 'dropDisabled: true' , all default value is 'false' |
| drag-over-background-color | String | '#C9FDC9' | set drag over background color |
| klass | String | | set append tree class |

Methods in node.model

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

Event

@item-click(node, item, e)

@item-toggle(node, item, e)

@item-drag-start(node, item, e)

@item-drag-end(node, item, e)

@item-drop-before(node, item, draggedItem, e)

@item-drop(node, item, draggedItem, e)

node : current node vue object

item : current node data item object

e : event

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 '+' |
| dragDisabled | Boolean | false | selective drag |
| dropDisabled | Boolean | false | selective drop |

Custom Item Example

`




scope be replaced in the vue@2.5.0+ , over vue@2.5.0+ use slot-scope
``

License

Licensed under the MIT license.

Thanks For jstree's UI