트리 셀렉트 (TreeSelect)

출처: 문서

본문

계층적 데이터를 표현할 때 사용하는 트리 구조 컴포넌트예요. 사용자가 트리의 노드를 클릭하면 선택된 값은 해당 노드의 label이 돼요.

TreeSelect는 트리 구조를 따르며, 선택하면 노드의 label이 선택된 값으로 사용돼요.

트리의 어떤 레벨이든 선택할 수 있어요. 다만 체크박스는 표시되지 않아요.

트리 노드의 자식들만 선택할 수 있어요.

하위 노드들이 체크된 노드와 함께 선택되며, 이후의 선택도 서로 연결돼요.

다중 선택이에요.

filterable 속성을 사용해서 TreeSelect를 키보드 입력으로 필터링할 수 있어요.

노드의 렌더링(슬롯 사용), 노드의 값(value-key 사용), 표시 텍스트(label-key 사용), 비활성화 상태(disable-key 사용), 자식 체크(check-strictly 사용) 등을 커스터마이즈할 수 있어요.

Name	Description	Type	Default
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
show-checkbox	체크박스 표시 여부	boolean	false
default-expanded-keys	기본적으로 펼쳐진 노드의 키	array	—
default-checked-keys	기본적으로 체크된 노드의 키	array	—
current-node-key	현재 선택된 노드의 키	string	—
value	현재 선택된 노드의 값. 단일 선택 모드에서는 노드의 label이에요	string / number	—

Name	Description	Type
update:value 2.7.2	트리 노드 체크 상태 업데이트	Function

Name	Description
default	노드 콘텐츠 커스터마이즈
empty	빈 콘텐츠