Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. tree/index.vue 内:

<テンプレート>
  <div>
      <ul>
          <item :model='データ'></item>
      </ul>
  </div>
</テンプレート>
 
<スクリプト>
'./item' からアイテムをインポートします
エクスポートデフォルト{
    コンポーネント:{
        アイテム
    },
    データ（）{
        戻る {
            データ：{
                タイトル:"レベル 1",
                子供たち：[
                    {
                        タイトル:"レベル 1-1",
                        子供たち：[
                            {
                                タイトル:"レベル 3 1-1-1",
                                子供たち：[
                                    {
                                        タイトル:「レベル4 1-1-1-1」、
                                        子供たち：[
                                            {
                                                タイトル:"レベル 5 1-1-1-1-1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        タイトル:「レベル1-2」、
                        子供たち：[
                            {
                                タイトル:「レベル3 1-2-1」
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</スクリプト>

2. item.vue コンポーネント:

<テンプレート>
  <li>
      <div @click="トグル">
          {{モデル.タイトル}}
          <span v-if="isFolder">[{{open?'-':'+'}}]</span>
      </div>
      <ul v-show="開く" v-if="isFolder">
          <item v-for="(child,index) in model.children" :model='child' :key='index'></item>
      </ul>
  </li>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:'アイテム',
    小道具:{
        モデル：{
            タイプ:オブジェクト、
            必須:true
        }
    },
    データ（）{
        戻る {
            開く:false
        }
    },
    計算:{
        フォルダ(){
           this.model.children を返す && this.model.children.length>0
        }
    },
    方法:{
        トグル（）{
            if (this.isFolder) this.open =!this.open
        }
    }
}
</スクリプト>

3. 任意のコンポーネントでの使用:

<テンプレート>
  <div class="index">
      <木></木>
  </div>
</テンプレート>
 
<スクリプト>
    「@/components/tree」から Tree をインポートします。
    コンポーネント:{
        木
    }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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