Collapsible & Checkable Tree Diagram In Vue – blocks-tree

blocks-tree is a Vue 3 component for generating collapsible and checkable organization trees in apps.

How to use it:

1. Import the blocks-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. Available component props.

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],

4. Events.

• @node-click: Click
• @node-mouseover: Mouse over
• @node-mouseout: Mouse out
• @node-expand: Expand nodes

Preview:

Changelog:

v0.5.2 (05/16/2021)

• Update

Download Details:

Author: megafetis

Live Demo: https://megafetis.github.io/vue3-blocks-tree-demo/

Download Link: https://github.com/megafetis/vue3-blocks-tree/archive/refs/heads/master.zip

Official Website: https://github.com/megafetis/vue3-blocks-tree

Install & Download:

# Yarn
$ yarn add vue3-blocks-tree

# NPM
$ npm i vue3-blocks-tree