Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/10quality/vue-tree-view
Tree View component for Vue JS.
https://github.com/10quality/vue-tree-view
Last synced: 24 days ago
JSON representation
Tree View component for Vue JS.
- Host: GitHub
- URL: https://github.com/10quality/vue-tree-view
- Owner: 10quality
- License: mit
- Created: 2016-05-28T00:19:45.000Z (about 8 years ago)
- Default Branch: v1.0
- Last Pushed: 2016-05-30T18:49:11.000Z (about 8 years ago)
- Last Synced: 2024-05-16T22:44:17.234Z (about 1 month ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 43
- Watchers: 7
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vuejs - vue-tree-view ★7
- awesome-vue-refactor - vue-tree-view ★7
- repo-560-awesome-vue-cn - vue-tree-view
- awesome-vue-cn - vue-tree-view
README
# Tree View Component (for [Vue](http://vuejs.org/))
[](https://badge.fury.io/gh/10quality%2Fvue-tree-view)
[](https://badge.fury.io/bo/vue-tree-view)
Tree view component for [Vue Js](http://vuejs.org/).
[Demo](http://codepen.io/amostajo/pen/zBYoPM)
[Demo (with Bootstrap)](http://codepen.io/amostajo/pen/mEdOxP)
[Demo (with customized CSS)](http://codepen.io/amostajo/pen/BzaQxW)
## Package index
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Events](#event)
- [License](#license)
## Installation
Several installation options are available:
- [Download the latest release](https://github.com/10quality/vue-tree-view/releases).
- Install with [Bower](http://bower.io): `bower install vue-tree-view`.
## Usage
Add the following resources for the *tree view* to function correctly.
```html
```
Add the component in your vue view.
```html
```
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.
### Props
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](http://codepen.io/amostajo/pen/rLNWZQ)):
```html
```
```javascript
new Vue({
el: '#app',
data: {
id: undefined, // Binded to component.
users: [
{
name: 'John',
id: 1
},
{
name: 'Jane',
id: 2
}
],
},
});
```
### Events
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](http://codepen.io/amostajo/pen/zBYomb)):
```javascript
new Vue({
el: '#app',
events: {
'treeview_click': function(node) {
// TODO my code here
console.log(node.label);
console.log(node.value);
}
},
});
```
## License
Copyright (c) 2016 [10Quality](http://www.10quality.com/). Under MIT License.