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 | | RequiredUsing by id from data | | nameKey | String | | RequiredUsing by name from data | | parentIdKey | String | | RequiredUsing 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');