0.3.1 • Published 8 years ago
vue-component v0.3.1
vue-component
Components for Vue.js
This project is under developing. DO NOT use it in your production environment.
If you have any idea about the project, just open an issue.
Treeview
Usage
HTML:
<treeview v-ref:basic-treeview
:model="tree"
:root-visible="true"
@item-toggle="onItemToggle"
@item-expand="onItemExpand"
@item-collapse="onItemCollapse"
@item-click="onItemClick">
</treeview>
JS
new Vue({
el: 'body',
components: {
'treeview': require('vue-component/treeview')
},
methods: {
onItemClick: function (e) {
console.log('item-click', e);
},
onItemToggle: function (e) {
console.log('toggle', e);
},
onItemExpand: function (e) {
console.log('expand', e);
},
onItemCollapse: function (e) {
console.log('toggle', e);
},
collapseAll: function () {
this.$refs.basicTreeview.collapseAll();
},
expandAll: function () {
this.$refs.basicTreeview.expandAll();
}
},
data: {
tree: {
name: 'root',
children: [{
name: 'parent 1',
expanded: true,
children: [{
name: 'child a',
children: [
{name: 'deep 1'},
{name: 'deep 2'}
]
}, {
name: 'child b',
expanded: true,
children: [
{name: 'deep 3'},
{name: 'deep 4'}
]
}]
}, {
name: 'parent 2',
children: [
{name: 'child c'},
{name: 'child d'}
]
}, {
name: 'parent 3',
children: [
{name: 'child e'},
{name: 'child f'}
]
}, {
name: 'parent 4',
children: [
{name: 'child g'},
{name: 'child h'}
]
}]
}
}
});