vue-tree

vue-tree is a Vue component that implements a TreeView control. Its aim is to provide common tree options in a way that is easy to use and easy to customize.

The Component is still pre-1.0 and should be considered unstable. Breaking changes may occur at any time before the 1.0 release.

View Demo View Github

Installation

Install the component with your favorite package manager:

yarn add @grapoza/vue-tree
Shell

or

npm install --save @grapoza/vue-tree
Shell

The default import from this package is the components from the .vue files. In addition to this, pre-compiled versions of the TreeView 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" :model="dataModel"></tree-view>
</template>

<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>
HTML

Or, import it into your application:

import TreeView from "@grapoza/vue-tree"
Vue.use(TreeView)
JavaScript

Then add the component:

<tree-view id="my-tree" :model="dataModel"></tree-view>
HTML
export default {
  data() {
    return {
      dataModel: [
        {id: "numberOrString", label: "Root Node", children: [
          {id: 1, label: "Child Node"},
          {id: "node2", label: "Second Child"}]
        }]
    }
  }
}
JavaScript

GitHub

grapoza/vue-tree

??

— Read More

Download as zip