Block tree is a simple organizational hierarchical horizontal or vertical tree view based on Vue3.x. It supports events, slots, horizontal visibility, and node processing.

Thanks to hukaibaihu and his vue 2 sources are taken as a basis.

Bootstrap 5 To Create Vertical And Nested Collapsible Tree Menu Plugin
Hierarchical Tree With Radio Buttons Using Vanilla JS and Bootstrap | ninotree

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-blocks-tree

# NPM
$ npm i vue3-blocks-tree

1. Import the block tree.

import {createApp} from 'vue';
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
let defaultoptions = {
    // OPTIONS HERE
}
createApp(App).use(VueBlocksTree, defaultoptions)

2. Create a basic organization tree.

<blocks-tree :data="treeData"></blocks-tree>

import { defineComponent,ref,reactive } from 'vue';
export default defineComponent({
  setup() {
    let selected = ref([]);
    let treeOrientation = ref("0");
    let treeData = reactive({
        label: 'root',
        expand: true,
        some_id: 1,
        children: [
          { label: 'child 1', some_id: 2, },
          { label: 'child 2', some_id: 3, },
          { 
            label: 'subparent 1', 
            some_id: 4, 
            expand: false, 
            children: [
              { label: 'subchild 1', some_id: 5 },
              {  
                label: 'subchild 2', 
                some_id: 6, 
                expand: false, 
                children: [
                  { label: 'subchild 11', some_id: 7 },
                  { label: 'subchild 22', some_id: 8 },
                ]
              },
            ]
          },
        ]
    });
    return {
      treeData,
    }
  }
})

3. Component props available.

data: {
  type: Object,
  required: true
},
props: {
  type: Object,
  default: () => (<PropsType>{
    label: 'label',
    expand: 'expand',
    children: 'children'
  })
},
horizontal: Boolean,
collapsable: Boolean,
renderContent: Function,
labelWidth: [String, Number],
labelClassName: [Function, String],

API

Must Read: An Editable SVG-based Diagram Component For Vue

props

Must Read: A JavaScript Library To Create Flow Charts Interactively | diagramflowjs

events

Must Read: Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Slots

Must Read: jQuery Plugin for Convert PPTX to HTML5 | PPTXjs

node-expand

well be called when the collapse-btn clicked

• params e Event
• params data Current node data
• params context Node context

node-click

well be called when the node-label clicked

• params e Event
• params data Current node data
• params context Node context

node-mouseover

It is called when the mouse hovers over the label.

• params e Event
• params data Current node data
• params context Node context

node-mouseout

It is called when the mouse leaves the label.

• params e Event
• params data Current node data
• params context Node context

See Demo And Download

Official Website(megafetis): Click Here

This superior jQuery/javascript plugin is developed by megafetis. For extra advanced usage, please go to the official website.