Vue Js를 이용한 트리 컨트롤
WPF나 MFC 등은 자체적으로 트리 컨트롤을 지원하지만. html 에서는 지원 하지 않는다. 트리 구조의 뷰를 만들기 위해서는 결국 이를 별도로 작성해야 한다. 트리 컨트롤은 기본적으로 재귀적으로 구현해서 재사용성을 높여 주는 것이 좋다. 물론 자신이 만드는 소프트웨어에서 데이터를 어떤식으로 구성 하고 있는지에 따라 다르겠지만, 재귀적으로 구현하면 노드의 Depth가 달라져도 계속 활용하여 사용 할 수 있기 때문이다. 이를 Vue JS로 구현해보기로 하자. 구성은 아래와 같다. 1. 표출할 데이터. 2. Vue Component 3.파일 구성 |--- HomeView.vue | |---TreeItem.vue -- TreeItem.vue [{{ isOpen ? '-' : '+' }}] {{ item.na..
Tech/Web
2021. 9. 10. 13:25