Home
Other
Powerful Tree View Component – vue-tree

Powerful Tree View Component – vue-tree

grapoza Last Updated: 5 months ago

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:

v5.2.0 (04/16/2022)

  • Update

v5.1.0 (02/04/2022)

  • Add dataTransferEffectAllowed to TNS
  • Refactor composables
  • Update packages (manual clear of yarn.lock)
  • Fix exclusive node selection

v5.0.1 (02/05/2022)

  • Add dataTransferEffectAllowed to TNS
  • Refactor composables
  • Fix exclusive node selection

v5.0.0 (09/17/2022)

  • Code has been refactored to use the Composition API and composables (the composables will be refactored further in a future release).
  • Add maxMatches parameter to getMatching
  • A treeNodeChildCheckboxChange event is now fired by a node when its child is checked/unchecked

v4.0.3 (03/06/2022)

  • Remove SASS dependency

v4.0.2 (11/03/2021)

  • Bugfix

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/5.1.0/?path=/docs/examples-treeview--add-remove

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

Related Posts

Tags:

Add Comment