首頁 > web前端 > 前端問答 > vue數組轉成樹狀結構

vue數組轉成樹狀結構

王林
發布: 2023-05-24 10:42:37
原創
639 人瀏覽過

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

  1. 實作轉換方法

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

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屬性中。

  1. 測試結果

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

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": []
      }
    ]
  }
]
登入後複製

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

  1. 總結

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板