@devsun/vue3-simple-tree

Vue3 Simple Tree

vue3-simple-tree is very simple tree library.

It was based on Vue3, typescript.

Setup

npm i @devsun/vue3-simple-tree

Usage

Component

You can use <simple-tree />:

<simple-tree
        ref="simpleTreeRef"
        :data="data"
        id-key="menuId"
        name-key="menuNm"
        parent-id-key="parentMenuId"
        root-id=""
        :checkable="checkable"
        :selectable="selectable"
        :draggable="draggable"
        :include-indeterminate="includeIndeterminate"
        :expand-all="expandAll"
        :expand-options="expandOptions"
        @check="handleCheckTree"
        @select="handleSelectTree"
></simple-tree>

Attributes

Name	Type	Default	Description
ref	String		used for tree API call
data	Object[]	[]	Required
idKey	String		Required Using by id from data
nameKey	String		Required Using by name from data
parentIdKey	String		Required Using by parent id from data
rootId	String	undefined	parentId of root node from data
checkable	Boolean	false	Whether to show a checkbox
includeIndetereminate	Boolean	false	Whether to include indeterminated node in checked data
selectable	Boolean	false	Whether to use the selection
draggable	Boolean	false	Whether to change the tree by drag and drop
expandAll	Boolean	true	Whether to expand all nodes
expandOptions	{ ids: string[], level: number}		Expand specific nodes

Event

check

() => Object[]

<simple-tree
        @check="handleCheckTree"
></simple-tree>

select

() => Object

<simple-tree
        @select="handleSelectTree"
></simple-tree>

API

getCheckedData

() => Object[]

return checked data

<script lang="ts" setup>
	const simpleTreeRef = ref(null);
    function getCheckedData() {
       const checkedData =  simpleTreeRef.value.getCheckedData();
    }
</script>

<template>
	<simple-tree
        ref="simpleTreeRef"
        ...
	></simple-tree>
</template>

getChangedData

() => Object[]

return chagned data by drag and drop

<script lang="ts" setup>
	const simpleTreeRef = ref(null);
    function getChangedData() {
       const changedData =  simpleTreeRef.value.getChangedData();
    }
</script>

<template>
	<simple-tree
        ref="simpleTreeRef"
        ...
	></simple-tree>
</template>

getSelectedData

() => Object[]

return selected data

<script lang="ts" setup>
	const simpleTreeRef = ref(null);
    function getSelectedData() {
       const selectedData =  simpleTreeRef.value.getSelectedData();
    }
</script>

<template>
	<simple-tree
        ref="simpleTreeRef"
        ...
	></simple-tree>
</template>

getData

() => Object[]

return latest data

<script lang="ts" setup>
	const simpleTreeRef = ref(null);
    function getData() {
       const latestData =  simpleTreeRef.value.getData();
    }
</script>

<template>
	<simple-tree
        ref="simpleTreeRef"
        ...
	></simple-tree>
</template>

Global Component

use gloabl component:

// main.ts
import { plugin as SimpleTreePlugin } from '@devsunp/vue3-simple-tree';

const app = createApp(App);

// use plugin
app.use(SimpleTreePlugin);

app.mount('#app');