Customizable draggable tree component for Vue.js.

Demo

npm i sl-vue-tree

Support for Vue3 coming soon. Check out sl-vue-tree-next while that is being shaped up.

<div id="app"> <sl-vue-tree v-model="nodes" /> </div> <link rel="stylesheet" href="dist/sl-vue-tree-dark.css"> <script src="dist/sl-vue-tree.js"></script> <script> var nodes = [ { title: 'Item1', isLeaf: true }, { title: 'Item2', isLeaf: true, data: { visible: false } }, { title: 'Folder1' }, { title: 'Folder2', isExpanded: true, children: [ { title: 'Item3', isLeaf: true }, { title: 'Item4', isLeaf: true } ] } ]; new Vue({ el: '#app', components: { SlVueTree }, data: function () { return { nodes: nodes }; } }); </script>

The value property is an array of ISlTreeNodeModel nodes:

interface ISlTreeNodeModel<TDataType> { title: string; isLeaf?: boolean; children?: ISlTreeNodeModel<TDataType>[]; isExpanded?: boolean; isSelected?: boolean; isDraggable?: boolean; isSelectable?: boolean; data?: TDataType; // any serializable user data }

For convenience, the component's events return ISlTreeNode objects. These are actually ISlTreeNodeModel instances with some computed properties:

interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> { isFirstChild: boolean; isLastChild: boolean; isVisible: boolean; // node is visible if all of its parents are expanded level: number; // nesting level ind: number; // index in the array of siblings path: number[]; // path to node as an array of indexes, e.g., [2, 0, 1] is the path to `Item4` in the example above pathStr: string; // serialized path to node children: ISlTreeNode<TDataType>[]; }

You can get the list of ISlTreeNode objects from the computed slVueTree.nodes property.

interface ICursorPosition<TDataType> { node: ISlTreeNode<TDataType>; placement: 'before' | 'inside' | 'after'; }

<sl-vue-tree v-model="nodes"> <template slot="title" slot-scope="{ node }"> <span class="item-icon"> <i class="fa fa-file" v-if="node.isLeaf"></i> <i class="fa fa-folder" v-else></i> </span> {{ node.title }} </template> </sl-vue-tree>

slVueTree.traverse((node, nodeModel, path) => { Vue.set(nodeModel, 'isSelected', true); });

Demo

You must include a babel-polyfill for the component to work correctly in IE11.

See IE11 Example

See CONTRIBUTING.md

• Fixed TypeScript definitions. See #77.

• Added insert method. See #39.

• Enabled the ability to disable or enable the expand/collapse button. See #33.

• Added IE11 support. See #17.

• Added empty-node slot.

• Added multiselectKey property.

• Added isSelectable and isDraggable flags.

• Added getNextNode and getPrevNode methods. See #6.

• Improved dropping at the bottom of the tree. See #5.

• Added SlVueTree.select method.
• Fixed SlVueTree.@nodeclick event.