트리 V2 (Tree V2)
트리 V2 (Tree V2)
출처: 문서
본문
계층적 데이터를 표현할 때 사용하는 트리 구조 컴포넌트예요.
기본 사용법 (Basic Usage)
가상화 트리 구조예요.
필터 (Filter)
filter 메서드나 filterNodeMethod 속성을 사용해서 트리를 필터링할 수 있어요.
커스텀 콘텐츠 (Custom Content)
기본 콘텐츠가 요구 사항에 부족할 때 슬롯을 사용해서 트리 노드 콘텐츠를 커스터마이즈할 수 있어요.
데이터 추가 (Appending Data)
트리 인스턴스에 데이터를 추가하는 방법이에요.
API
Tree V2 속성 (Attributes)
| Attribute | Description | Type | Default |
|---|---|---|---|
| height | 트리의 높이 | number | 200 |
| item-size | 각 자식 노드의 크기 | number | 26 |
| data | 트리의 데이터 | array | — |
| empty-text | 데이터가 비어 있을 때 표시되는 텍스트 | string | — |
| 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 |
| current-node-key | 현재 선택된 노드의 키 | string | — |
| show-checkbox | 체크박스 표시 여부 | boolean | false |
| icon | 커스텀 트리 노드 아이콘 | string | — |
| default-expanded-keys | 기본적으로 펼쳐진 노드의 키 | array | — |
| default-checked-keys | 기본적으로 체크된 노드의 키 | array | — |
| lazy | 자식 노드를 지연 로딩할지 여부 | boolean | false |
| load | 트리 데이터를 로드하는 메서드 | Function | — |
| filter-node-method | 트리 노드를 필터링하는 함수 | Function | — |
| highlight-current | 현재 노드가 강조되는지 여부 | boolean | false |
| draggable | 트리 드래그 가능 여부 | boolean | false |
| allow-drag | 노드를 드래그하기 전에 실행되는 함수 | Function | — |
| allow-drop | 노드를 드롭하기 전에 실행되는 함수 | Function | — |
| virtual-scroll | 가상 스크롤 활성화 여부 | boolean | false |
Tree V2 이벤트 (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 |
Tree V2 슬롯 (Slots)
| Name | Description |
|---|---|
| default | 노드 콘텐츠 커스터마이즈 |
| empty | 빈 콘텐츠 |
Tree V2 메서드 (Methods)
| Name | Description |
|---|---|
| filter | 모든 트리 노드를 필터링해요 |
| updateKeyChildren | 트리 노드의 자식들을 업데이트해요 |
| getCheckedNodes | 체크된 노드 배열을 가져와요 |
| setCheckedNodes | 체크된 노드 배열을 설정해요 |
| setChecked | 체크된 노드를 설정해요 |
| getHalfCheckedNodes | 절반 체크된 노드 배열을 가져와요 |
| getHalfCheckedKeys | 절반 체크된 노드의 keys를 가져와요 |
| getCurrentKey | 현재 선택된 노드의 key를 가져와요 |
| getCurrentNode | 현재 선택된 노드의 데이터를 가져와요 |
| setCurrentKey | 현재 선택된 노드의 key를 설정해요 |
| setCurrentNode | 현재 선택된 노드의 데이터를 설정해요 |
| getNode | key로 노드 데이터를 가져와요 |
| remove | 노드를 삭제해요 |
| append | 지정된 노드에 자식 노드를 추가해요 |
| insertBefore | 지정된 노드 앞에 노드를 추가해요 |
| insertAfter | 지정된 노드 뒤에 노드를 추가해요 |
| getLazyNode | 지정된 노드의 child를 가져와요 |
| scrollToNode | 대상 노드로 스크롤해요 |
| scrollNodeTo | 대상 노드로 스크롤해요 |