TreeSelector

성능을 고려하여 가상 스크롤이 적용된 다목적 트리 컴포넌트입니다.

Types

import type { IconTypes } from '@jennifersoft/vue-components-v2';

export interface TreeNode<T> {
    key: string;
    label: string;
    children: TreeNode<T>[];
    fold?: boolean;
    check?: boolean;
    disable?: boolean;
    icon?: IconTypes;
    data?: T;
}

// TreeSelector.vue
const props = withDefaults(
    defineProps<{
        tree: TreeNode<T>[];
        multiSelect?: boolean;
        leafIconForMultiSelect?: IconTypes;
        width?: number;
        height?: number;
        checkedKeys?: string[];
    }>(),
    {
        multiSelect: false,
        leafIconForMultiSelect: undefined,
        width: 0,
        height: 300,
        checkedKeys: () => [],
    }
);

const emit = defineEmits<{
    (e: 'fold', nodes: TreeNode<T>[]): void;
    (e: 'change', nodes: TreeNode<T>[]): void;
}>();

Sample Code

<template>
    <tree-selector
        :tree="treeData"
        :multi-select="true"
        :leaf-icon-for-multi-select="ICON_TYPE.domain"
        :width="300"
        :height="430"
        @fold="onTreeFold"
        @change="onTreeChange"
    ></tree-selector>
</template>

<script setup lang="ts">
import type { TreeNode } from '@jennifersoft/apm-components';
import { TreeSelector } from '@jennifersoft/apm-components';
import { ICON_TYPE } from '@jennifersoft/vue-components-v2';

interface DomainData {
    domainId: number;
    instanceId: number;
}

const treeData: TreeNode<DomainData>[] = [
    {
        key: '0',
        label: 'sam',
        fold: true,
        check: true,
        disable: false,
        icon: ICON_TYPE.domainGroup,
        data: { domainId: 1000, instanceId: 0 },
        children: [
            {
                key: '0.0',
                label: 'test-sam',
                icon: ICON_TYPE.domain,
                data: { domainId: 1001, instanceId: 1001 },
                children: [],
            },
            {
                key: '0.1',
                label: 'agent-feature-demo',
                icon: ICON_TYPE.domain,
                data: { domainId: 1002, instanceId: 1002 },
                children: [],
            },
        ],
    },
    {
        key: '1',
        label: 'ryan',
        icon: ICON_TYPE.domainGroup,
        data: { domainId: 2000, instanceId: 0 },
    },
    ...
];

const onTreeFold = (nodes: TreeNode<DomainData>[]) => {
    console.log('Tree fold:', nodes);
};

const onTreeChange = (nodes: TreeNode<DomainData>[]) => {
    console.log('Tree change:', nodes[0]);
};
</script>

Demo

Multi

leaf-icon-for-multi-select 옵션에 설정된 아이콘을 가지는 노드만 체크박스가 노출됩니다. 해당 옵션이 없다면 부모 노드도 체크박스를 사용할 수 있습니다.

Single

단일 노드만 선택할 수 있습니다.