Tree View Component (for Vue)
Tree view component for Vue Js.
Several installation options are available:
- Download the latest release.
- Install with Bower:
bower install vue-tree-view.
Add the following resources for the tree view to function correctly.
<!-- Required Stylesheets -->
<link href="[component path]/dist/vue.tree-view.min.css" rel="stylesheet">
<!-- Required Javascript -->
<script src="vue.js"></script>
<script src="[component path]/dist/vue.tree-view.min.js"></script>Add the component in your vue view.
<!-- Assuming your view app is APP. -->
<body id="app">
<treeview :value.sync="value"
:model="treeData"
></treeview>
</body>Where:
- model is the tree data within your vue model.
- value is the selected value in the tree you want to bind with your model.
List of available props to use in component:
| Prop | Data Type | Default | Description |
|---|---|---|---|
model |
Array | [] | Tree data. |
value |
String or Numeric | Tree's selected value. | |
class |
String | CSS Class to add to treeview. | |
children |
String | nodes | Name of the property in the tree that contains child nodes. |
labelname |
String | label | Name of the property in the tree that contains the node's label. |
valuename |
String | value | Name of the property in the tree that contains the node's value. |
Usage example (Demo):
<body id="app">
<treeview :value.sync="id"
:model="users"
class="form-control"
labelname="name"
valuename="id"
></treeview>
</body>new Vue({
el: '#app',
data: {
id: undefined, // Binded to component.
users: [
{
name: 'John',
id: 1
},
{
name: 'Jane',
id: 2
}
],
},
});List of available events to use in component:
| Event | Passes | Description |
|---|---|---|
treeview_click |
node: Selected node |
Triggered when a node is clicked. |
Usage example (Demo):
new Vue({
el: '#app',
events: {
'treeview_click': function(node) {
// TODO my code here
console.log(node.label);
console.log(node.value);
}
},
});Copyright (c) 2016 10Quality. Under MIT License.