Powerful Tree View Component – vue-tree

Description:

A simple yet full-featured and highly customizable tree view component for Vue.

More Features:

  • Works in modern browsers using the precompiled scripts, or can be included in your babel/webpack chain.
  • Expandable nodes
  • Checkboxes
  • Radio buttons
  • Node selection
  • Addition and removal of nodes
  • Slots for node content
  • Skinning
  • Asynchronous loading of child nodes
  • Follows ARIA guidelines for treeview accessibility
  • Drag and drop (single nodes, works between trees)

See Also:

How to use it:

1. Import the vue-tree.

import TreeView from "@grapoza/vue-tree"

2. Register the component.

export default {
  components: {
    TreeView
  }
}

3. Add the tree view component to the app template.

<template>
  <tree-view id="example" :initial-model="dataModel"></tree-view>
</template>

4. Add nodes to the tree view.

export default {
  components: {
    TreeView
  },
  data() {
    return {
      dataModel: [
        {id: "numberOrString", label: "Root Node", children: [
        {id: 1, label: "Child Node"},
        {id: 2, label: "Second Child"}]
        }
      ]
    }
  }
}

5. All default tree props.

initialModel: {
  type: Array,
  required: true
},
modelDefaults: {
  type: Object,
  required: false,
  default: function () { return {}; }
},
selectionMode: {
  // none, 'single', 'selectionFollowsFocus', or 'multiple'
  type: String,
  required: false,
  default: SelectionMode.None,
  validator: function (value) {
    return Object.values(SelectionMode).includes(value);
  }
},
skinClass: {
  type: String,
  required: false,
  default: 'default-tree-view-skin',
  validator: function (value) {
    return value === null || !value.match(/\s/);
  }
}

Preview:

Powerful Tree View Component - vue-tree

Changelog:

v4.0.0 (10/07/2021)

  • Remove IE11
  • Update treeview to Vue 3
  • Add shallow_clone: true for automation
  • Move node normalization to a mixin

v3.0.3 (06/21/2021)

  • Updates dependency versions for security and stability fixes.

v3.0.2 (06/02/2021)

  • Updates dependency versions for security and stability fixes.

v3.0.1 (05/17/2021)

  • Updates dependency versions for security and stability fixes.

v3.0.0 (03/23/2021)

  • Add wrapper div around children div and loading message
  • Separate behaviors for expandable and state.expanded
  • Make event names use present tense
  • Move areChildrenLoading and and areChildrenLoaded into private state
  • Add asynchronous loading for the initial model

Download Details:

Author: grapoza

Live Demo: https://grapoza.github.io/vue-tree/3.0.2/demos.html

Download Link: https://github.com/grapoza/vue-tree/archive/master.zip

Official Website: https://github.com/grapoza/vue-tree

Install & Download:

# Yarn
$ yarn add @grapoza/vue-tree

# NPM
$ npm i @grapoza/vue-tree

You Might Be Interested In:

Add Comment