vue 배열을 트리 구조로 변환-프런트엔드 Q&A-php.cn

vue 배열을 트리 구조로 변환

王林

풀어 주다： 2023-05-24 10:42:37

원래의

649명이 탐색했습니다.

Vue는 많은 작업이 배열을 기반으로 하는 인기 있는 프런트 엔드 프레임워크입니다. Vue에서 복잡한 트리 구조 데이터를 표시해야 하는 경우 페이지에서 표시 및 작업을 용이하게 하기 위해 배열을 트리 구조 데이터로 변환해야 합니다. 이번 글에서는 Vue 배열을 트리 구조로 변환하는 구현 방법을 소개합니다.

데이터 구조 결정

변환을 수행하기 전에 먼저 변환하려는 데이터 구조를 결정해야 합니다. 이 문서에서는 다음 데이터 구조를 예로 들어 보겠습니다.

let dataArray = [
  { id: 1, name: 'parent1', parentId: 0 },
  { id: 2, name: 'parent2', parentId: 0 },
  { id: 3, name: 'child1', parentId: 1 },
  { id: 4, name: 'child2', parentId: 1 },
  { id: 5, name: 'child3', parentId: 2 },
  { id: 6, name: 'grandchild1', parentId: 3 },
  { id: 7, name: 'grandchild2', parentId: 3 }
];

로그인 후 복사

그 중 각 요소에는 ID가 포함됩니다. , 이름 및 상위 요소 ID입니다. 이 데이터 구조는 부모-자식 관계의 트리 구조를 나타내는 데 사용할 수 있습니다.

변환 방법 구현

다음으로 변환 방법을 구현해야 합니다. 데이터 구조에 따라 노드 클래스를 정의할 수 있습니다:

class Node{
  constructor(data){
    this.id = data.id;
    this.name = data.name;
    this.parentId = data.parentId;
    this.children = [];
  }
}

로그인 후 복사

그중 id, name, parentId는 노드의 상위 노드의 id, name 및 id를 나타내고, children은 노드 아래의 하위 노드 모음을 나타냅니다. .

다음으로 원본 배열을 기반으로 루트 노드를 생성합니다.

function buildTree(dataArray) {
  let root = new Node({ id: 0, name: 'root', parentId: null });
  
  // 循环处理每个节点
  for(let i=0;i<dataArray.length;i++){
      let data = dataArray[i];
      let node = new Node(data);
  
      // 添加到父节点下
      let parent = findNode(root, data.parentId);
      parent.children.push(node);
  }
  return root.children;
}

// 根据id查找节点
function findNode(node, targetId) {
  if (node.id === targetId) {
      return node;
  } else {
      for (let i = 0; i < node.children.length; i++) {
          let result = findNode(node.children[i], targetId);
          if (result !== null) {
              return result;
          }
      }
      return null;
  }
}

로그인 후 복사

buildTree 메서드에서 먼저 루트 노드를 생성한 다음 dataArray를 반복하고 각 노드를 생성한 다음 상위 노드의 하위 노드에 추가합니다. 속성의 노드.

findNode 메소드는 지정된 ID를 가진 노드를 찾는 데 사용됩니다. 루프 중에 노드를 발견하면 해당 노드를 상위 노드의 children 속성에 추가합니다.

테스트 결과

이제 방법을 테스트할 수 있습니다.

let treeData = buildTree(dataArray);

console.log(JSON.stringify(treeData));

로그인 후 복사

출력 결과는 다음과 같습니다.

[
  {
    "id": 1,
    "name": "parent1",
    "parentId": 0,
    "children": [
      {
        "id": 3,
        "name": "child1",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "grandchild1",
            "parentId": 3,
            "children": []
          },
          {
            "id": 7,
            "name": "grandchild2",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "child2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "parent2",
    "parentId": 0,
    "children": [
      {
        "id": 5,
        "name": "child3",
        "parentId": 2,
        "children": []
      }
    ]
  }
]

로그인 후 복사

원본 배열을 트리 구조 데이터로 성공적으로 변환한 것을 확인할 수 있습니다.

요약

Vue에서는 많은 작업이 배열과 분리될 수 없습니다. 복잡한 트리 구조 데이터를 표시해야 하는 경우 배열을 트리 구조 데이터로 변환할 수 있습니다. 이 기사에서는 Vue 배열을 트리 구조로 변환하는 구현 방법을 소개합니다. 먼저 데이터 구조를 결정한 다음 변환 방법을 구현하고 마지막으로 테스트하여 올바른 결과를 얻습니다. 이 방법을 사용하면 페이지에서 쉽게 표시하고 작업할 수 있도록 Vue 배열 데이터를 변환할 수 있습니다.

위 내용은 vue 배열을 트리 구조로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!