lb-vue-tree v1.3.2

Screenshot

Description

Install

npm install lb-vue-tree --save

Include plugin in your main.js file.

import Vue from 'vue'
import lbVueTree from 'lb-vue-tree';
Vue.component('lb-vue-tree', lbVueTree);

Usage

Local data (or complete serverside load)

In this example, if you have a call to server, or static data that is smaller and has all the nodes inside, you can fetch data once and use it in a tree.

template code for local data

<template>
    <lb-vue-tree v-model="data" v-on:itemclick="itemClick" display-field="text">
        <template slot="rootitem"slot-scope="{item, parent}">
            <span>Root item</span>
        </template>
        <template slot="menu" slot-scope="{item, parent}">
            <ul>
                <li>New</li>
                <li>Edit</li>
            </ul>
        </template>
        <template v-slot:itemcontent="{item}">
            <div class="item-inputs">
                Min: <input type="text" v-model="item.text">
                Max: <input type="text">
                Active: <input type="checkbox">
            </div>
        </template>
    </lb-vue-tree>
</template>

script code for local data

export default {
    data(){
        return {
            data: [{
                id: '1',
                text: 'test',
                children: [{
                    id: '2',
                    text: 'child test'
                }]
            }]
        }
    },
    methods: {
        itemClick(item, parent) {

        }
    }
};

Remote data (server side data), fetching node by node, also draggable support

In this case you can load server side data only for singe node, so for example you will load only initial root level, then by clicking on the nodes your assigned method will be called to fetch "ONLY" that node children

Method for fetching node data MUST be a promise, callbacks are not supported

template code for server side data

<template>
    <lb-vue-tree v-model="data" :async-method="getData" v-on:itemclick="itemClick" :draggable="true" v-on:dragend="dragEnd" display-field="username">
        <template slot="rootitem">
            <span>Root item</span>
        </template>
        <template slot="menu" slot-scope="{item, parent}">
            <ul>
                <li>New</li>
                <li>Edit</li>
            </ul>
        </template>
    </lb-vue-tree>
</template>

There are two optional slots to use: "rootitem": used if you wan't to display root item of the tree in case your tree data does not have it and you need a starting point "menu": if you need a menu on right click, you can add it here, there are also two arguments, item and parent passed to menu slot

script code for remote data

export default {
    data(){
        return {
            data: []
        }
    },
    async created()
    {
        //make an initial load of data
        this.data = await this.getData(null);
    },
    methods: {
        itemClick(item) {

        },
        dragEnd(data)
        {
            //data.start holds the item you are dragging
            //data.end holds the item dragged on
            //data.position holds the postion related to end position (upper, center, lower)
            console.log(data.start, data.end, data.position);
        },
        async getData(item, parent)
        {
            if(item != null)
            {
                //fetch data from server for specific node based on data from item, for example:
                return await axios.get('/getTreedata?id='+item.id)
            }
            else
            {
                return await axios.get('/getTreedata')
            }
        }
    }
};

Available settings

Available events