Vuejs tree view Components And Modules – Vue Tree View Component

Vuejs tree view Components And Modules – Vue Tree View Component

Vuejs tree view Components And Modules – Vue Tree View Component

In this Post We Will Explain About is Vuejs tree view Components And Modules – Vue Tree View Component With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Treeview Example using Data from ControllerExample

In this post we will show you Best way to implement Expand/Collapse Items in TreeView for Vuejs, hear for How to expand tree view on click in MVC and Vuejswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Support Vue.js 2.0+ here one example to learn vuejs simple root to open childern node using vuejs example step by step.

Read Also:  ng-app Directive with Name using Angular Example

Put the following some required resources.

<link rel="stylesheet" href="[You Path]font-awesome/4.+/css/font-awesome.min.css">
<link rel="stylesheet" href="src/tree.vue.css">

<script src="[You Path]vue.js"></script>
<script src="src/tree.vue.js"></script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pakainfo.com Vuejs Tree Step by step example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
	<!-- Include CSS -->
    <link rel="stylesheet" href="tree.vue.css">
</head>
<body>
<!-- vuejs rendering data using HTML-->
<div id="demo">
    <h1>{{title}}</h1>
	<!-- here all the componets print using vuejs -->
    <vue-tree :option="option"></vue-tree>
</div>
<!-- Include Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.min.js"></script>
<!-- Include Scripts -->
<script src="tree.vue.js"></script>
<!-- Include Scripts -->
<script src="demo.js"></script>
</body>
</html>

demo.js

(function () {
    'use strict';
    var createNode = function (part) {
        part.isOpen = true;
        part.subPart.push({
            name: 'child part ' + part.subPart.length,
            parent: part,
            isParent: true,
            subPart: [],
            buttons: [
                {
                    title: 'create',
                    icon: 'fa fa-plus',
                    click: createNode
                }, {
                    title: 'Delete',
                    icon: 'fa fa-trash',
                    click: function (part) {
                        part.parent.subPart.splice(part.parent.subPart.indexOf(part), 1);
                    }
                }
            ]
        });
    };
    new Vue({
        el: '#demo',
        data: {
            title: 'Live Vue Tree Demo',
            option: {
                root: {
                    name: 'Root Node',
                    isParent: true,
                    isOpen: true,
                    openedIcon: 'fa fa-folder-open-o',
                    closedIcon: 'fa fa-folder-o',
                    subPart: [
                        {
                            name: 'live24u1'
                        },
                        {
                            name: 'live24u1 with icon',
                            icon: 'fa fa-cube',
                            title: 'www.Pakainfo.com'
                        },
                        {
                            name: 'Name your Node',
                            buttons: [
                                {
                                    title: 'Edit',
                                    icon: 'fa fa-edit',
                                    click: function (part) {
                                        part.name = prompt('Editing part name, require string', part.name) || part.name;
                                    }
                                }
                            ]
                        },
                        {
                            name: 'live24u1 has subPart',
                            icon: 'fa fa-folder',
                            openedIcon: 'fa fa-folder-open',
                            isOpen: false,
                            isParent: true,
                            subPart: [
                                {
                                    name: 'live24u2 - 1',
                                    icon: 'fa fa-file'
                                },
                                {
                                    name: 'live24u2 - 2',
                                    icon: 'fa fa-file'
                                },
                                {
                                    name: 'live24u2 - 3',
                                    icon: 'fa fa-file'
                                }
                            ]
                        },
                        {
                            name: 'live24u1 add part',
                            isParent: true,
                            subPart: [],
                            buttons: [
                                {
                                    title: 'create',
                                    icon: 'fa fa-plus',
                                    click: function (part) {
                                        part.isOpen = true;
                                        part.subPart.push({
                                            name: 'Level2 part ' + part.subPart.length,
                                            parent: part,
                                            buttons: [
                                                {
                                                    title: 'Delete',
                                                    icon: 'fa fa-trash',
                                                    click: function (part) {
                                                        part.parent.subPart.splice(part.parent.subPart.indexOf(part), 1);
                                                    }
                                                }
                                            ]
                                        });
                                    }
                                }
                            ]
                        },
                        {
                            name: 'live24u1-createNode',
                            isParent: true,
                            subPart: [],
                            buttons: [
                                {
                                    title: 'create',
                                    icon: 'fa fa-plus',
                                    click: createNode
                                }
                            ]
                        },
                        {
                            name: 'live24u1 Ajax',
                            isParent: true,
                            subPart: [],
                            showLoading: true, // here if (part.showLoading && part._loading) and then show loading icon
                            onOpened: function (part) {
                                if (!part._loading) {
                                    Vue.set(part, 'subPart', []); // simple Pakainfo.com Clean old data
                                    part._loading = true; //here call or Start Ajax
                                    setTimeout(function () { //
                                        part._loading = false; //lets Finish Ajax call
                                        for (var i = 1; i < 10; i++) {
                                            part.subPart.push({name: 'vuejs example ' + i});
                                        }
                                    }, 2000);
                                }
                            },
                            onClosed: function () {
                                // here NOOP
                            }
                        }
                    ]
                }
            }
        }
    });
})();

Vuejs tree Node Options List

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *