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.
Put the following some required resources.
index.html
Pakainfo.com Vuejs Tree Step by step example {{title}}
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
- Requested for parent node
- Control node to fold or unfold
- Icon class name
- For parent. Show when isOpen == true
- show icon if it's null or empty
- Requested for parent node
- For parent, when `node.showLoading && node._loading`
- Ajax node is opened then show loading icon
I hope you have Got What is Adding treeview control to listview And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.