@grapoza/vue-tree v5.2.2
vue-tree
vue-tree is a Vue component that implements a Tree View control. Its aim is to provide common tree options in a way that is easy to use and easy to customize.
Full Documentation
See the full documentation over at the project's Github Pages. This includes information on how to use and configure the tree view, features (both existing and planned) as well as some demos.
Installation
Install the component with your favorite package manager:
yarn add @grapoza/vue-tree
or
npm install --save @grapoza/vue-tree
The default import from this package is the components from the .vue files. In addition to this, pre-compiled versions of the Tree View component and CSS are also available in the package but you will need to reference them manually from your own project.
Usage
If you're using it in a .vue file:
<template>
<tree-view id="my-tree" :initial-model="dataModel"></tree-view>
</template>
// Options API
<script>
import { TreeView } from "@grapoza/vue-tree"
export default {
components: {
TreeView
},
data() {
return {
dataModel: [
{
id: "numberOrString",
label: "Root Node",
children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}
]
}
]
}
}
}
</script>
// Composition API
<script setup>
import { TreeView } from "@grapoza/vue-tree"
const dataModel = ref([
{
id: "numberOrString",
label: "Root Node",
children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}
]
}
])
</script>
Or, import it into your application:
import { TreeView } from "@grapoza/vue-tree"
Vue.use(TreeView)
Then add the component:
<tree-view id="my-tree" :initial-model="dataModel"></tree-view>
export default {
data() {
return {
dataModel: [
{id: "numberOrString", label: "Root Node", children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}]
}]
}
}
}
7 months ago
7 months ago
10 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago