https://github.com/t0lik/tree-vue
A Treeview component for Vue.js
https://github.com/t0lik/tree-vue
treeview-component vue vuejs2
Last synced: 3 months ago
JSON representation
A Treeview component for Vue.js
- Host: GitHub
- URL: https://github.com/t0lik/tree-vue
- Owner: t0lik
- Created: 2019-11-17T18:45:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2026-02-23T12:01:11.000Z (3 months ago)
- Last Synced: 2026-02-23T19:57:48.958Z (3 months ago)
- Topics: treeview-component, vue, vuejs2
- Language: JavaScript
- Homepage:
- Size: 1.37 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TreeVue
A Vue treeview component that visualizes your data hierarchically.
## Features
* full programmatic access
* wide range of events
* flexible configuration
* no limitations on the number of instances per page
* filtering
* sorting
* multiselection
* keyboard navigation
## Installation
**Npm:**
```shell
$ npm install vu-tree
```
**Yarn:**
```shell
$ yarn add vu-tree
```
## Documentation
[The component documentation](https://t0lik.github.io/tree-vue-docs).
[The documentation sources](https://github.com/t0lik/tree-vue-docs).
## Demo app
To run the demo:
* Clone this repository
* `npm install`
* `npm run serve`
* Visit `http://localhost:8080/` (or similar url that is located under the "App running at" after command "npm run serve")
This simple app demonstrates almost all main tree features.
## Usage
```html
import Vue from 'Vue'
import { TreeVue } from 'vu-tree'
Vue.use(TreeVue)
export default {
...
data() {
return {
items: [
{ name: 'Node 1' },
{ name: 'Node 2',
checked: true,
open: true,
children: [
{ name: 'Node 3', disabled: true },
{ name: 'Node 4' }
]}
],
options: {
showCheckbox: true
}
}
}
...
}
```
### Events
All the events can be captured using the usual Vue event engine:
```html
...
```
### Node management
Nodes are managed by the node storage that is accessed by the function "getStorage" of the tree component.
```html
import Vue from 'Vue'
import { TreeVue } from 'tree-vue'
Vue.use(TreeVue)
export default {
computed: {
storage () {
if (!this.$refs.treeVue) {
return null
}
return this.$refs.treeVue.getStorage()
}
},
...
methods: {
checkAllNodes () {
this.storage.checkAll()
}
}
...
```
## Development
To build this component from sources just run this command:
- `npm run build`
To run unit tests:
- `npm run test:unit`
## License
[MIT](https://opensource.org/licenses/MIT)