vue配列をツリー構造に変換する-フロントエンドQ&A-php.cn

vue配列をツリー構造に変換する

王林

リリース： 2023-05-24 10:42:37

オリジナル

648 人が閲覧しました

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、名前、ID を表し、子はコレクションを表します。ノードの下の子ノードの数。

次に、元の配列に基づいてルートノードを作成します。

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 属性に追加します。

テスト結果

これでメソッドをテストできます:

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 中国語 Web サイトの他の関連記事を参照してください。