A Vue treeview component that visualizes your data hierarchically.
- full programmatic access
- wide range of events
- flexible configuration
- no limitations on the number of instances per page
- filtering
- sorting
- multiselection
- keyboard navigation
Npm:
$ npm install vu-tree
Yarn:
$ yarn add vu-tree
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.
<template>
<tree-vue
:items="items"
:options="options"
ref="treeVue"
/>
</template>
<script>
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
}
}
}
...
}
</script>
All the events can be captured using the usual Vue event engine:
<template>
<tree-vue
:items="items"
:options="options"
ref="treeVue"
@tree:checked:all="onCheckedAll"
@node:enabled="onNodeEnabled"
/>
</template>
...
Nodes are managed by the node storage that is accessed by the function "getStorage" of the tree component.
<template>
<tree-vue
:items="items"
:options="options"
ref="treeVue"
/>
</template>
<script>
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()
}
}
...
To build this component from sources just run this command:
npm run build
To run unit tests:
npm run test:unit