sl-vue-tree

Customizable draggable tree component for Vue.js

demo

install

npm i sl-vue-tree

Quick start

<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. Those actually are ISlTreeNodeModel with some computed props:

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 array of indexes, for example [2, 0, 1] in the example above is path to `Item4`      pathStr: string; // serialized path to node     children: ISlTreeNode<TDataType>[]; }

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

Props

Computed props

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

Events

Methods

Slots

IE 11 support

You must add a babel-polyfill for it to work correctly in IE11
See IE11 example

Examples

Add a folder or item icon via title slot

<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-if="!node.isLeaf"></i>       </span>            {{ node.title }}            </template> </sl-vue-tree> 

Select all nodes

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

Handle keydown and keyup events via getNextNode and getPrevNode methods

demo

Contributing

see CONTRIBUTING.md

Changelog

v1.8.4

• added insert method https://github.com/holiber/sl-vue-tree/pull/39

v1.8.3

• Allow to disable or enable the expand/collapse button https://github.com/holiber/sl-vue-tree/pull/33

v1.8.1

• added IE11 support https://github.com/holiber/sl-vue-tree/issues/17

v1.8.0

• added empty-node slot

v1.7.1

• added multiselectKey property

v1.7.0

• added isSelectable and isDraggable flags

v1.6.0

• added getNextNode and getPrevNode methods https://github.com/holiber/sl-vue-tree/issues/6

v1.5.1

• improve drop on the bottom of tree https://github.com/holiber/sl-vue-tree/issues/5

v1.5.0

• SlVueTree.select method added
• SlVueTree.@nodeclick event fixed