vue數組轉成樹狀結構

Vue是一款流行的前端框架，其中許多操作都是基於陣列進行的。當我們需要在Vue中展示複雜的樹形結構數據時，我們需要將數組轉換為樹結構數據，以方便我們在頁面上展示和操作。本文將介紹Vue陣列轉換為樹結構的 實作方法。

1. #確定資料結構

在進行轉換前，我們需要先確定我們要轉換的資料結構，本文以以下資料結構為例：

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。這個資料結構可以用來表示一個有父子關係的樹狀結構。

2. 實作轉換方法

接下來，我們需要實作一個轉換方法。根據我們的資料結構，我們可以定義一個節點類別：

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

其中，id、name、parentId表示節點的id、名稱以及父節點的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，建立每個節點，並將其添加到其父節點的children屬性中。

findNode方法用於尋找指定id的節點，當我們在循環時遇到該節點時，我們將其新增到其父節點的children屬性中。

3. 測試結果

我們現在可以測試我們的方法：

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": []
      }
    ]
  }
]

我們可以看到，我們成功將原始數組轉換為樹狀結構資料。

4. 總結

在Vue中，許多操作都離不開數組，當我們需要展示複雜的樹狀結構資料時，我們可以將數組轉換為樹結構資料。本文介紹了Vue數組轉換為樹結構的實作方法，首先確定了資料結構，然後實作了轉換方法，最後我們進行了測試，得出了正確的結果。您可以根據這個方法，來轉換您的Vue數組數據，以便在頁面上方便地展示和操作。

以上是vue數組轉成樹狀結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！