Skip to content

kamil-lip/bootstrap-vue-treeview

Repository files navigation

A treeview component for Bootstrap and Vue.js 2.0+

Bootstrap-Vue-Treeview Screenshot

Online demo

https://bootstrap-vue-treeview.appdiamond.pl

Features

  • Drag & drop nodes
  • Context menu

Installation

npm install --save bootstrap-vue-treeview

Getting started

Webpack

If you use Webpack bundler (recommended) you can import component and register it locally:

import { bTreeView } from 'bootstrap-vue-treeview'
[...]
components: {
	bTreeView
},

or globally using plugin:

import BootstrapVueTreeview from 'bootstrap-vue-treeview'
Vue.use(BootstrapVueTreeview)

Now you can you the treeview component in your code:

<b-tree-view :data="treeData"></b-tree-view>
export default {
  data() {
    return {
      treeData: [{"id": 2, "name": "Venus" , "children": [{"id": 3, "name": "Neptune"}, {"id": 4, "name": "Stratus"} ] } ]
    }
  }
}

API

TreeView

1. Vue props

Prop Type Description Default value Required
data Array Tree data - Yes
nodeKeyProp String Name of the property containing unique node key "id" No
nodeChildrenProp String Where to look for node children "children" No
nodeLabelProp String Name of the property containing node label "name" No
showIcons Boolean Show/hide icons false No
iconClassProp String Name of the property containing icon class "icon" No
defaultIconClass String Icon class to apply if node has no icon class property null No
prependIconClass String Class to apply to every icon (common to all icons) null No
nodesDraggable Boolean Enable/disable drag & drop feature false No
contextMenu Boolean Enable/disable context menu true No
renameNodeOnDblClick Boolean Enable/disable double click to rename feature true No
contextMenuItems Array of menu items Context menu items [ { code: 'DELETE_NODE', label: 'Delete node' }, { code: 'RENAME_NODE', label: 'Rename node' } ] No

2. Events

Event name Description Parameters
nodeSelect Triggered every time a node is selected/deselected. Check second parameter to verify if the node was selected or deselected TreeNode object, isSelected
contextMenuItemSelect Triggered every time a context menu item was clicked. Context menu item object (see below), TreeNode object

TreeNode

Props and events of the tree node component are not intended to be used directly.

1. Methods

Method name Description Parameters
select Select node -
deselect Deselect node -
expand Expand node (show children) -
collapse Collapse node (hide children) -
toggle Expand/collapse -

Menu item

1. Properties

Property Description
code Code of the menu item. Check this code to know which menu item was clicked.
label Label being displayed for the user

About

A treeview component for Bootstrap and Vue.js 2.0+

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published