A treeview component for Bootstrap and Vue.js 2.0+

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 |