vue-sortable-tree


Demo Link

Demo Link Source Code

QQ交流群: 424580388

Install

vue version < 2.5
``
$ npm install vue-sortable-tree@1.1.0 --save [must < 1.2.0]
`
vue version >= 2.5
`
$ npm install vue-sortable-tree --save
`

$3

`javascript
import SortableTree from 'vue-sortable-tree'
Vue.component(SortableTree.name, SortableTree)
`

$3

`javascript
import SortableTree from 'vue-sortable-tree'

// then in component
components: {
[SortableTree.name]: SortableTree
}
`


Usage


`vue

`

$3

`vue



`

Property | Type | Default | Description
-------- | ---- | ------- | -----------
data | Object | - | Tree data source.
attr | String | 'name' | A name of property in data source that will be display.
childrenAttr | String | children | A name of property in data source that contain children node.
mixinParentKey | String | '' | A name of property that contain parent data.
closeStateKey | String | '' | A name of property to determine the open/close state.
draggable | Boolean | true | Enable dragging the tree node.

Event | Parameter | Description
----- | --------- | -----------
changePosition | {beforeParent, data, afterParent} | Trigger when node position has been changed.




$3

if your project can't support scss please add below dependence

`
npm install node-sass --save-dev
npm install sass-loader --save-dev
``

Project demo image

!img

You can design your style easily with custom template.

eg:

!img