vue+要素ツリー(ツリー制御データ形式)コンポーネントのナレッジポイントまとめ

この記事は、vue 要素ツリー (ツリー コントロール データ形式) コンポーネントに関する知識ポイントをまとめたものです。必要な方は参考にしてください。

最近、グループで使用できる最初のコンポーネントを作成しました。これは最も単純なバージョンですが、これも非常に手間がかかりました。先輩たちが問題を解決するのを手伝ってくれて、なんとかやり遂げることができました。このツリーコンポーネントの作成プロセスと、そのプロセス中に使用されたナレッジポイントを記録しましょう。

最初に、ポップアップ ウィンドウ マスクをクリックするという要件について説明します。もちろん、ポップアップ ウィンドウのコンテンツは、ポップアップのサイズです。複数選択ボックスを表示するかどうか。デフォルトで選択されており、キーワードでノード (要素) をフィルタリングします。よく使用される機能がいくつか組み込まれており、後で使用するときに追加できます。他の目的。すべて解決済み)

今日は、まずデータ処理の問題を記録します

バックエンドと通信した後、インターフェイスを通じてそのようなデータを取得することがわかりました:

[
            { id: '01', label: '测试活动', pId: '1' },
            { id: '011', label: '测试活动1', pId: '01' },
            { id: '012', label: '测试活动2', pId: '01' },
            { id: '02', label: '测试活动3', pId: '1' },
            { id: '021', label: '测试活动4', pId: '02' },
            { id: '022', label: '测试活动5', pId: '02' },
            { id: '0221', label: '测试活动6', pId: '022' },
            { id: '0222', label: '测试活动7', pId: '022' },
            { id: '0223', label: '测试活动6', pId: '022' },
            { id: '0224', label: '测试活动7', pId: '022' },
            { id: '0225', label: '测试活动6', pId: '022' },
            { id: '0226', label: '测试活动7', pId: '022' },
        ]

そして、要素を確認します。ドキュメントには、プラグインを使用したいデータ形式がこのようなものであることが表示されます。

    [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]

次に、データを処理する必要があります。最初にjsコードを入力します。

// 親ノードをループアウトします

export function toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点，pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//数组加数组值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 调用子节点方法,参数为父节点的数组
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//这样调用就好使了

上記の関数に紐付けられる4つの値は、すべてデータID、IDのフィールド名、pid、親クラスIDのフィールド名、フィールド名です。コンテンツの内容 (渡されるフィールドは必ずしも id、pid label と呼ばれるわけではないため、柔軟です)

  toTreeData(this.data,"id","pid","label")//这样调用就好使了
  //这个回调函数作用当然是转换数组的格式

この関数がコールバックなしで単独で取り出される場合、その機能は構成された配列を渡すことです。親要素の直接の子要素を親要素の子フィールドにプッシュするため、新しく生成された子要素の配列を次の呼び出しの親要素の配列として扱うだけで済みます。この関数を呼び出すと、さらに深く掘り下げられます。

関連する推奨事項:

PHP 無限分類、ツリー データ形式

##YiiFramework の入門レベルのナレッジ ポイントの概要 (グラフィック チュートリアル)、yiiFramework のナレッジ ポイント

以上がvue+要素ツリー(ツリー制御データ形式)コンポーネントのナレッジポイントまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。