Support Vue.js 2.0+
Add the following 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>Add the component in your vue view.
<div id="app"> <vue-tree :option="option"></vue-tree> </div> <script> new Vue({ el: '#app', data: { option: { root: { //Root Node, see Node Options name: 'Root Node', isParent: true, isOpen: true, children: [] } } } </script>[opt] means optional property.
{ name: 'Node Name', title: 'Node Tag title attr', isParent: true, // Requested for parent node isOpen: false, // [opt] Control node to fold or unfold icon: 'fa fa-folder', //[opt] Icon class name openedIcon: 'fa fa-folder-open', // [opt] For parent. Show when isOpen == true, show icon if it's null or empty closedIcon: 'fa fa-folder', // [opt] For parent. Show when isOpen != true, show icon if it's null or empty children: [], // Requested for parent node buttons: [ // [opt] { title: 'icon button tag title attr', //[opt] icon: 'fa fa-edit', click: function (node) { //[opt] // } } //... ], showLoading: false, // [opt] For parent, when `node.showLoading && node._loading` and node is opened then show loading icon onOpened: function (node) {}, // [opt] onClosed: function (node) {} // [opt] }Copyright (c) 2016 weibangtuo. Under MIT License.