트리 (Tree)

트리 (Tree)

출처: 문서

본문

계층적 데이터를 표현할 때 사용하는 트리 구조 컴포넌트예요.

기본 사용법 (Basic Usage)

트리의 기본 사용법이에요.

선택 가능 (Selectable)

노드 선택을 트리거해요.

지연 로딩 (Lazy Loading)

노드 데이터를 지연 로딩해요.

기본 펼침/체크 상태 (Default Expanded and Checked State)

기본적으로 펼쳐지거나 체크된 트리 노드의 상태를 설정해요.

커스텀 기본 상태 (Custom Default State)

default-checked-keys, default-expanded-keys, default-expanded-all, default-expanded 같은 기본 상태들은 props.type="default"를 사용할 때는 적용되지 않아요.

커스텀 트리 노드 콘텐츠 (Custom Tree Node Content)

트리 노드 콘텐츠를 커스터마이즈해요.

커스텀 노드 클래스 (Custom Node Class)

class를 키로 사용해서 트리 노드에 클래스를 추가할 수 있어요.

필터 메서드의 트리 노드 (Tree Node in Filter Method)

interface FilterNode {
  label: string
  type: string
  id: string
  children?
}

type FilterMethod = (value, node, data) => boolean

슬롯 사용 (Using Slots)

슬롯을 통해 트리 노드의 콘텐츠를 커스터마이즈할 수 있어요. 슬롯 호출은 노드 데이터에 대한 스코프를 제공해요.

필터 (Filter)

키워드로 트리 노드를 필터링해요.

아코디언 (Accordion)

같은 부모의 자식 노드 중 한 번에 하나만 펼쳐져요.

드래그 가능 (Draggable)

노드를 드래그 앤 드롭으로 옮길 수 있어요.

드래그 허용 (Allow Draggle)

allow-drag와 allow-drop 속성을 설정해서 드래그 동작을 커스터마이즈할 수 있어요.

속성 (Attributes)

Name Description Type Default
data 트리의 데이터 array —
empty-text 데이터가 비어 있을 때 표시되는 텍스트 string —
height 트리의 높이 string —
item-size 각 자식 노드의 크기 number —
render-after-expand 첫 번째 펼침 이후에만 자식 노드를 렌더링할지 여부 boolean true
node-key 각 트리 노드의 고유 식별 키 이름 string —
check-strictly 부모와 자식 노드 사이의 체크 상태를 엄격하게 따를지 여부 boolean false
default-expand-all 기본적으로 모든 노드를 펼칠지 여부 boolean false
expand-on-click-node 노드를 클릭할 때 트리를 펼칠지 여부. 기본값은 false로, 구버전의 기본값과 같아요 boolean true
auto-expand-parent 자식 노드가 펼쳐질 때 부모 노드를 펼칠지 여부 boolean true
check-on-click-node 노드를 클릭할 때 노드를 체크할지 여부 boolean false
check-descendants 선택 버튼을 클릭할 때 노드의 하위 노드들을 체크할지 여부 boolean false
accordion 한 번에 하나의 노드만 펼칠지 여부 boolean false
indent 인접 레벨 노드들의 가로 들여쓰기 number 18
icon 커스텀 트리 노드 아이콘 string —
icon-class 커스텀 트리 노드 아이콘 클래스 string —
type 2.5.3 트리 노드 타입 enum —
draggable 트리 드래그 가능 여부 boolean false
allow-drag 노드를 드래그하기 전에 실행되는 함수 Function —
allow-drop 노드를 드롭하기 전에 실행되는 함수 Function —
lazy 자식 노드를 지연 로딩할지 여부 boolean false
load 트리 데이터를 로드하는 메서드 Function —
filter-node-method 트리 노드를 필터링하는 함수 Function —
highlight-current 현재 노드가 강조되는지 여부 boolean false
show-checkbox 체크박스 표시 여부 boolean false
drag-allow-type 2.5.3 드래그 가능한 노드의 커스텀 타입 Function —
default-expanded-keys 기본적으로 펼쳐진 노드의 키 array —
default-checked-keys 기본적으로 체크된 노드의 키 array —
current-node-key 현재 선택된 노드의 키 string —
tooltip-class 2.10.7 노드 툴팁(show-overflow-tooltip)의 커스텀 클래스 string —

Tree 이벤트 (Events)

Name Description Type
node-click 노드가 클릭될 때 트리거돼요 Function
node-contextmenu 노드가 오른쪽 클릭될 때 트리거돼요 Function
check-change 체크 상태가 변경될 때 트리거돼요 Function
check 체크박스가 체크될 때 트리거돼요 Function
current-change 현재 노드가 변경될 때 트리거돼요 Function
node-expand 노드가 펼쳐질 때 트리거돼요 Function
node-collapse 노드가 접힐 때 트리거돼요 Function
node-drag-start 드래그가 시작될 때 트리거돼요 Function
node-drag-enter 드래그가 노드에 들어갈 때 트리거돼요 Function
node-drag-leave 드래그가 노드를 떠날 때 트리거돼요 Function
node-drag-over 드래그가 노드 위에 있을 때 트리거돼요 Function
node-drag-end 드래그가 끝날 때 트리거돼요 Function
node-drop 드래그 앤 드롭 후에 트리거돼요 Function

메서드 (Methods)

Name Description
filter 모든 트리 노드를 필터링해요
updateKeyChildren 트리 노드의 자식들을 업데이트해요 (지정된 노드에 자식 데이터를 설정하면 그 노드가 펼칠 수 있는 노드가 돼요)
getCheckedNodes 체크된 노드들의 배열을 가져와요
setCheckedNodes 체크된 노드들의 배열을 설정해요
getCheckedKeys 체크된 키들의 배열을 가져와요
setCheckedKeys 체크된 키들의 배열을 설정해요
setChecked 노드의 체크박스 상태를 설정해요 (노드의 키)
getHalfCheckedNodes 현재 절반 체크된 노드들의 배열을 가져와요
getHalfCheckedKeys 현재 절반 체크된 노드들의 키 배열을 가져와요
getCurrentKey 현재 선택된 노드의 키를 가져와요
getCurrentNode 현재 선택된 노드의 데이터를 가져와요
setCurrentKey 현재 선택된 노드를 설정해요 (노드의 키)
setCurrentNode 현재 선택된 노드를 설정해요 (노드의 데이터)
getNode 키로 노드 데이터를 가져와요
remove 트리 노드를 제거해요
append 지정된 트리 노드에 자식 노드를 추가해요 (지정하지 않으면 루트 노드에 추가해요)
insertBefore 트리 레벨에서 지정된 노드 앞에 노드를 삽입해요
insertAfter 트리 레벨에서 지정된 노드 뒤에 노드를 삽입해요
getLazyNode 키로 지연 로드 노드를 가져와요 (노드의 키)
scrollToNode 2.8.4 대상 노드로 스크롤해요
scrollNodeTo 2.8.4 대상 노드로 스크롤해요

Tree 슬롯 (Slots)

Name Description
default 트리 노드 콘텐츠
empty 빈 콘텐츠

더 알아보기 (Learn more)