Vue.js で折りたたみ可能なツリーメニューを実装する方法-jsチュートリアル-php.cn

Vue.js で折りたたみ可能なツリーメニューを実装する方法

亚连

リリース： 2018-06-15 16:42:16

オリジナル

4448 人が閲覧しました

この記事では、再帰コンポーネントを効果的に使用する方法を説明し、展開/折りたたみ可能なツリーメニューを構築することを段階的に説明します。この記事では、Vue.js の再帰コンポーネントを使用して折りたたみ可能なツリーメニューを実装する方法を共有します。必要な友達はそれを参照してください

Vue.js では、再帰コンポーネントは次のようにそれ自体を呼び出します。

Vue.component('recursive-component', {
  template: `
       `
 });

ログイン後にコピー

再帰コンポーネントは、コメント、ネストされたメニュー、または基本的には、内容は異なっていても同じタイプの親と子を表示するためにブログでよく使用されます。例:

次に、再帰コンポーネントを効果的に使用する方法を示し、展開/折りたたみ可能なツリーメニューを構築していきます。

データ構造

ツリー UI の再帰コンポーネントは、再帰データ構造の視覚的表現になります。このチュートリアルでは、各ノードがオブジェクトであるツリー構造を使用します:

ラベルプロパティ。

子ノードがある場合、nodes プロパティは 1 つ以上のノードの配列プロパティです。

すべてのツリー構造と同様に、ルートノードが必要ですが、無限に深くすることができます。

let tree = {
  label: 'root',
  nodes: [
   {
    label: 'item1',
    nodes: [
     {
      label: 'item1.1'
     },
     {
      label: 'item1.2',
      nodes: [
       {
        label: 'item1.2.1'
       }
      ]
     }
    ]
   }, 
   {
    label: 'item2' 
   }
  ]
 }

ログイン後にコピー

再帰コンポーネント

TreeMenu というデータ構造を表示する再帰コンポーネントを作成しましょう。現在のノードのラベルのみを表示し、それ自体を呼び出して子ノードを表示します。ファイル名: TreeMenu.vue、内容は次のとおりです:

ログイン後にコピー

コンポーネントを再帰的に使用する場合は、最初に Vue.component のグローバル定義を作成するか、それに name 属性を与える必要があります。そうしないと、子コンポーネントはそれ以上呼び出すことができなくなり、未定義の「未定義コンポーネントエラー」エラーメッセージが表示されます。

基本イベント

他の再帰関数と同様に、再帰を終了するには基本イベントが必要です。そうしないと、レンダリングが無限に続き、最終的にはスタックオーバーフローが発生します。

ツリーメニューでは、子のないノードに到達したときに再帰を停止したいと考えています。これは v-if を介して実行できますが、 v-for を使用することを選択すると、暗黙的にそれが実装されます。ノード配列にそれ以上の定義がない場合は、ツリーメニューコンポーネントが呼び出されます。 template.vue ファイルは次のとおりです:

ログイン後にコピー

Usage

このコンポーネントを今どのように使用しますか?まず、データ属性と定義されたツリーメニューコンポーネントを含むデータ構造を持つ Vue インスタンスを宣言します。 app.js ファイルは次のようになります:

import TreeMenu from './TreeMenu.vue'
 let tree = {
  ...
 }
 new Vue({
  el: '#app',
  data: {
   tree
  },
  components: {
   TreeMenu
  }
 })

ログイン後にコピー

データ構造にはルートノードがあることを思い出してください。ルートノード属性を小道具に使用して、メインテンプレートの TreeMenu コンポーネントの再帰呼び出しを開始します。

ログイン後にコピー

現在は次のようになります:

正しい姿勢

「深さ」を視覚的に識別しますサブコンポーネントの「」は、ユーザーが UI からデータ構造を把握できるようにするのに適しています。これを実現するには、各レベルで子ノードをインデントします。

これは、TreeMenu を通じて深度プロパティ定義を追加することで実現されます。この値を使用して、インラインスタイルを動的に変換にバインドします。transform:translate の CSS ルールが各ノードのラベルに使用され、インデントが作成されます。 template.vue は次のように変更されます**:**

ログイン後にコピー

Depth 属性は、メインテンプレートでは 0 から始まります。上記のコンポーネントテンプレートでは、この値が子ノードに渡されるたびに増加することがわかります。

ログイン後にコピー

注: 深さの値が文字列ではなく JavaScript の数値型であることを確認するために、必ず深さの値を v バインドしてください。

展開/折りたたみ

再帰的なデータ構造は大きくなる可能性があるため、それらを表示するための UI の優れたトリックは、ユーザーが必要に応じてノードを展開または折りたたむことができるように、ルートノードを除くすべてのノードを非表示にすることです。

これを行うには、ローカルプロパティ showChildren を追加します。値が False の場合、子ノードはレンダリングされません。この値はノードをクリックすることで切り替える必要があるため、クリックイベントリスナーメソッド toggleChildren を使用して管理する必要があります。 template.vue ファイルは次のように変更されます**:**

ログイン後にコピー

Summary

このようにして、作業ツリーメニューが完成しました。最後の仕上げとして、プラス/マイナスのアイコンを追加して、UI をより見やすくすることができます。また、オリジナルの showChildren に優れたフォントとコンピューティング機能を追加しました。

CodePen (https://codepen.io/anthonygore/pen/PJKNqa) にアクセスして、実装方法を確認してください。