VUE無限レベルツリーデータ構造表示の実装

プロジェクトに取り組んでいると、左側のメニューナビゲーションやコメント参照などでよく使用されるツリー状のデータ構造に遭遇することがあります。このデータ構造の特徴は、ネストされるレベルがわからないため、テンプレートを使用してこのようなデータを表示するのは少し難しいことです。この記事では、このデータ構造を表示する 2 つの方法について説明します。

記事で使用したデータは次のとおりです。

メインデータ: {
  値: "ルート"、
  子供たち：[{
    値: "レベル 1-1",
    子供たち：[{
      値: "レベル 2-1",
      子供たち：[{
          値: "レベル3-1",
          子供たち：[]
       }]
     },{
       値: "レベル 2-2",
       子供たち：[]
     }]
   },{
      値: "レベル1-2",
      子供たち：[]
   }]
}

こんな感じです。

コンポーネントの再帰呼び出し

1 つ目は、自分自身を再帰的に呼び出し、自分自身を参照して子のデータを表示するコンポーネントを作成するコンポーネントです。子コンポーネントは次のとおりです。

<テンプレート>
<div>
  <div class="demo">
    {{treeData.value}}
    <tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp>
  </div>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'treeComp',
  小道具:{
    ツリーデータ: {
      デフォルト: function(){
        戻る {}
      }
    }
  },
  マウントされた(){}、
  メソッド:{}
}
</スクリプト>
<style lang="less" スコープ>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
    &:before{content:'--';display: inline-block;padding:0 4px;}
  }
</スタイル>

次に、子コンポーネントを使用し、子コンポーネントにデータを渡す親コンポーネントを作成します。

<テンプレート>
  <tree-comp :treeData="メインデータ"></tree-comp>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'treeMain',
  データ （） {
    戻る {
      メインデータ: {
        値: "ルート"、
        子供たち：[
          {
            値: "レベル 1-1",
            子供たち：[{
              値: "レベル 2-1",
              子供たち：[{
                値: "レベル3-1",
                子供たち：[]
              }]
            },{
              値: "レベル 2-2",
              子供たち：[]
            }]
          },{
            値: "レベル1-2",
            子供たち：[]
          }
        ]
      }
    }
  },
  コンポーネント:{
    "tree-comp": () => import('./TreeComp')
  },
  マウントされた(){}、
  メソッド:{}
}
</スクリプト>

再帰コンポーネントの内容については、公式ドキュメントに記載されています-->再帰コンポーネント

レンダリングメソッドの使用

コンポーネントを使用するだけでなく、Vue の render メソッドを使用して JavaScript の完全なプログラミング機能を活用し、ツリーデータを再帰的に処理して、無限レベルのツリーを表示することもできます。次のように：

<テンプレート>
  <tree-comp :treeData="メインデータ"></tree-comp>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'treeRender',
  データ （） {
    戻る {
      メインデータ: {
        値: "ルート"、
        子供たち：[
          {
            値: "レベル 1-1",
            子供たち：[{
              値: "レベル 2-1",
              子供たち：[{
                値: "レベル3-1",
                子供たち：[]
              }]
            },{
              値: "レベル 2-2",
              子供たち：[]
            }]
          },{
            値: "レベル1-2",
            子供たち：[]
          }
        ]
      }
    }
  },
  コンポーネント:{
    ツリーコンプ:{
      機能的: 真、
      プロパティ: {treeData: オブジェクト},
      レンダリング(h, {props: {treeData = {}}}) {
        const creatNode = (ノード)=>{
          ノードの子とノードの子の長さが0より大きい場合
            hArr = node.children.map(item=>{ とする
              createNode(item) を返す
            })
            h('div', {class:'demo'}, [node.value, hArr]) を返します
          }それ以外{
            h('div', {class:'demo'}, [node.value]) を返します
          }          
        }
        createNode(treeData) を返す
      },
    }
  },
  マウントされた(){}、
  メソッド:{}
}
</スクリプト>
<style lang="less" スコープ>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
    &:before{content:'--';display: inline-block;padding:0 4px;}
  }
</スタイル>

その中核となるのは render メソッドです。creatNode メソッドは深さ優先方式でツリーデータを再帰的に走査し、vnode を生成してからページをレンダリングします。

VUE 無限レベルツリーデータ構造表示の実装に関するこの記事はこれで終わりです。VUE 無限レベルツリー構造に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: