Tree

Tree 컴포넌트는 디렉터리, 조직도, 분류 체계 등 계층적인 구조의 데이터를 표현할 때 사용합니다. 사용자는 각 노드를 확장하거나 축소하고, 선택할 수 있어 구조를 직관적으로 탐색할 수 있습니다.

Tree

RnD 대시보드 모음

David 대시보드

기술지원

싸이웰 시스템

지티플러스

이인티그레이션

Aiden 대시보드

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';

const treeData = ref([
    {
        label: 'RnD 대시보드 모음',
        dashboard_ids: ['dashboard_id1', 'dashboard_id2', 'dashboard_id3'],
        isOpen: true,
        id: 'id1',
        children: [
            {
                label: 'David 대시보드',
                id: 'id2',
                isOpen: true,
                children: [
                    {
                        label: '기술지원',
                        id: 'id3',
                        isOpen: true,
                        dashboard_ids: [
                            'dashboard_id4',
                            'dashboard_id5',
                            'dashboard_id6',
                        ],
                        children: [
                            {
                                label: '싸이웰 시스템',
                                id: 'id4',
                                dashboard_ids: ['dashboard_id7'],
                            },
                            {
                                label: '지티플러스',
                                id: 'id5',
                                dashboard_ids: ['dashboard_id8'],
                            },
                            {
                                label: '이인티그레이션',
                                id: 'id6',
                                dashboard_ids: ['dashboard_id9'],
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Aiden 대시보드',
                id: 'id7',
                children: [
                    {
                        label: '기술지원',
                        id: 'id8',
                        dashboard_ids: [
                            'dashboard_id10',
                            'dashboard_id11',
                            'dashboard_id12',
                        ],
                    },
                ],
            },
        ],
    },
]);
const selectedId = ref('id3');
</script>
<template>
    <tree :nodes="treeData" v-model="selectedId" />
</template>

Icon Tree

ryan

ryan-dash

ryan-k8s-1011

ryan-k8s-1012

ryan-k8s-1013

ryan-k8s-1014

Total

jennifer

infra

Demian

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';
import { ICON_TYPE } from '@jennifersoft/vue-components-v2';

const customIconTreeData = ref([
    {
        label: 'ryan',
        isOpen: true,
        id: 'id1',
        icon: ICON_TYPE.domainGroup,
        children: [
            {
                label: 'ryan-dash',
                id: 'id2',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1011',
                id: 'id3',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1012',
                id: 'id4',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1013',
                id: 'id5',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1014',
                id: 'id6',
                icon: ICON_TYPE.domain,
            },
        ],
    },
    {
        label: 'Total',
        isOpen: true,
        id: 'id7',
        icon: ICON_TYPE.domainGroup,
        children: [
            {
                label: 'jennifer',
                id: 'id8',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'autodeploy',
                        id: 'id8-1',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'webflux',
                        id: 'id8-2',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
            {
                label: 'infra',
                id: 'id10',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'simula',
                        id: 'id11',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'ENV_TEST',
                        id: 'id12',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Jennifer5',
                        id: 'id13',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
            {
                label: 'Demian',
                id: 'id20',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'Demian background',
                        id: 'id21',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Demian collector',
                        id: 'id22',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Demian console',
                        id: 'id23',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
        ],
    },
]);
const selectedId = ref('id3');
</script>
<template>
    <tree :nodes="customIconTreeData" v-model="selectedId" tree-type="icon" />
</template>

Folder Tree

RnD 대시보드 모음

David 대시보드

기술지원

싸이웰 시스템

지티플러스

이인티그레이션

Aiden 대시보드

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';

const treeData = ref([
    {
        label: 'RnD 대시보드 모음',
        dashboard_ids: ['dashboard_id1', 'dashboard_id2', 'dashboard_id3'],
        isOpen: true,
        id: 'id1',
        children: [
            {
                label: 'David 대시보드',
                id: 'id2',
                isOpen: true,
                children: [
                    {
                        label: '기술지원',
                        id: 'id3',
                        isOpen: true,
                        dashboard_ids: [
                            'dashboard_id4',
                            'dashboard_id5',
                            'dashboard_id6',
                        ],
                        children: [
                            {
                                label: '싸이웰 시스템',
                                id: 'id4',
                                dashboard_ids: ['dashboard_id7'],
                            },
                            {
                                label: '지티플러스',
                                id: 'id5',
                                dashboard_ids: ['dashboard_id8'],
                            },
                            {
                                label: '이인티그레이션',
                                id: 'id6',
                                dashboard_ids: ['dashboard_id9'],
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Aiden 대시보드',
                id: 'id7',
                children: [
                    {
                        label: '기술지원',
                        id: 'id8',
                        dashboard_ids: [
                            'dashboard_id10',
                            'dashboard_id11',
                            'dashboard_id12',
                        ],
                    },
                ],
            },
        ],
    },
]);
const selectedId = ref('id3');
</script>
<template>
    <tree :nodes="treeData" v-model="selectedId" tree-type="folder" />
</template>