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