vue3-tree 트리 컴포넌트 라이브러리

vue3-tree 트리 컴포넌트 라이브러리 

 

 

계층 구조 이미지

 

vue3-tree 라이브러리는 vue3을 위한 트리 컴포넌트 라이브러리다. 이 라이브러리는 계층적 구조를 가지는 데이터를 시각적으로 표현하고 다룰 수 있다. vue3-tree 라이브러리로 트리의 각 노드를 확장하거나 축소할 수 있으며, 체크박스, 삭제 수정에 따른 이벤트 처리 또한 가능하다. 아래의 JSON 데이터와 같이 계층 구조의 데이터를 불러와 사용자에게 보여주는 화면을 만들어보자.

[
  {
    "id": 1,
    "label": "Electronics",
    "nodes": [
      {
        "id": 2,
        "label": "Computers",
        "nodes": [
          {
            "id": 4,
            "label": "Laptops"
          },
          {
            "id": 5,
            "label": "Desktops"
          }
        ]
      },
      {
        "id": 3,
        "label": "Mobile Phones",
        "nodes": [
          {
            "id": 6,
            "label": "Smartphones",
            "nodes": [
              {
                "id": 8,
                "label": "Android"
              },
              {
                "id": 9,
                "label": "iOS"
              }
            ]
          },
          {
            "id": 7,
            "label": "Feature Phones"
          }
        ]
      }
    ]
  },
  {
    "id": 10,
    "label": "Books"
  }
]

 

 

• 샘플 프로젝트 생성

> vue create vue3-tree

 

 

• vue3-tree 라이브러리 설치

> npm install vue3-tree
 
# 또는
 
> yarn add vue3-tree

 

 

• App.vue

<template>
  <input v-model="searchText" type="text"/>
  <Tree :nodes="data" :search-text="searchText" :use-checkbox="true" :use-icon="true" use-row-delete show-child-count @nodeExpanded="onNodeExpanded" @update:nodes="onUpdate" @nodeClick="onNodeClick"/>
</template>
<script>
import { ref } from "vue";
import Tree from "vue3-tree";
import 'vue3-tree/dist/style.css';
 
export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        "id": 1,
        "label": "Electronics",
        "nodes": [
          {
            "id": 2,
            "label": "Computers",
            "nodes": [
              {
                "id": 4,
                "label": "Laptops"
              },
              {
                "id": 5,
                "label": "Desktops"
              }
            ]
          },
          {
            "id": 3,
            "label": "Mobile Phones",
            "nodes": [
              {
                "id": 6,
                "label": "Smartphones",
                "nodes": [
                  {
                    "id": 8,
                    "label": "Android"
                  },
                  {
                    "id": 9,
                    "label": "iOS"
                  }
                ]
              },
              {
                "id": 7,
                "label": "Feature Phones"
              }
            ]
          }
        ]
      },
      {
        "id": 10,
        "label": "Books"
      }
    ]);
    const searchText = ref("");
    const onNodeExpanded = (node, state) => {
      console.log("state: ", state);
      console.log("node: ", node);
    };
 
    const onUpdate = (nodes) => {
      console.log("nodes:", nodes);
    };
 
    const onNodeClick = (node) => {
      console.log(node);
    };
 
    return {
      data,
      searchText,
      onNodeExpanded,
      onUpdate,
      onNodeClick,
    };
  },
};
</script>
 
<style></style>

nodes : Tree 컴포넌트에 표시할 노드 데이터의 배열이다. 이 배열은 트리의 계층 구조를 나타내는 노드 객체들로 구성된다.
searchText : Tree 컴포넌트에서 사용자가 검색 할 텍스트를 나타낸다.
use-checkbox : 체크박스를 사용하여 노드 선택 기능을 활성화하는 boolean. 이 값을 true로 설정하면 각 노드의 왼쪽에 체크박스가 나타나며, 노드를 선택할 수 있다.
use-icon : 아이콘을 사용하여 노드를 시각적으로 표시하는 boolean. 각 노드의 왼쪽에 자식 노드가 있을 경우 아이콘이 표시된다.
use-row-delete : 행 삭제 기능 boolean. 이 값을 true로 설정하면 사용자는 각 행의 삭제 버튼을 클릭하여 행을 삭제할 수 있다.
show-child-count : 노드의 자식 수를 표시하는 boolean. 이 값을 true로 설정하면 각 노드의 오른쪽에 자식 노드의 수 표시된다.
@nodeExpanded : 노드가 확장될 때 발생하는 이벤트로 확장된 노드의 정보를 전달받을 수 있다.
@update:nodes : 노드 데이터가 업데이트될 때 발생하는 이벤트로 노드 데이터를 전달받을 수 있다.
@nodeClick : 노드가 클릭되었을 때 발생하는 이벤트로 클릭된 노드의 정보를 전달받을 수 있다.

> npm run serve

 

 

 

• vue3-tree 가이드 문서

Getting Started | vue3-tree

 

 

• vue3-tree Github

GitHub - wopehq/vue3-tree: A tree library for Vue 3