Vueカスタムツリーコントロールの使い方の詳細な説明

木： {
        title: '', // タイトル (名前) 
        キー: '0'、
        head: '', // アバター selectStatus: false, // チェックボックスの選択状態 children: [
          {
            タイトル:「王王エピソード1」
            キー: '0-0'、
            頭： ''、
            選択ステータス: false、
            子供たち： [
              {
                キー: '0-0-0'、
                タイトル:「王仔1」
                ヘッド: require('@/assets/wan.jpg'),
                選択ステータス: false
              }
            ]
          },
          {
            タイトル:「王王パート2」
            キー: '0-1'、
            頭： ''、
            選択ステータス: false、
            子供たち： [
              {
                タイトル:「王旺二部一軍」
                キー: '0-1-0'、
                頭： ''、
                選択ステータス: false、
                子供たち： [
                  {
                    タイトル:「王旺二部、チーム1、クラス1」、
                    キー: '0-1-0-2'、
                    頭： ''、
                    選択ステータス: false、
                    子供たち： [
                      {
                        タイトル:「王在3」
                        キー: '0-1-0-2-0'、
                        ヘッド: require('@/assets/wan.jpg'),
                        選択ステータス: false
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

/*カスタム ツリー コントロールの核となるのは、「コンポーネントが自分自身を呼び出す」ことです。ここでは、ツリー コントロールはサブコンポーネントにカプセル化されています*/
<テンプレート>
  <div>
    <div class="tree-custom">
      <div :style="indent" @click="toggleChildren"> //toggleChildren イベントは、「コンテンツを展開」および「コンテンツを閉じる」ためのコントロール イベントです。/* 
       再帰データ表示の具体的な内容は次のとおりです。たとえば、このプロジェクトでの再帰の具体的な内容は、エフェクト図から「Picture/Avatar」、「Title/Name」、「null/CheckBox」です。
       効果図にはロジックが示されています。
       <div v-if="!headImg && ラベル">
       //アバター画像にタイトルがない場合は、「arrow-title」スタイルを表示します</div>
        <div v-if="headImg">
       //アバター画像がある場合は、「avatar-name-checkBox」スタイルを表示します</div>
       */      
      </div>
      <tree-custom // "自分自身を呼び出す"
        :key="children.key" // キーの値は一意です v-for="children in treeData"  
        v-if="showChildren" // トグルチャイルド イベントに基づいてコンテンツを展開するかどうかを決定します:treeData="children.children" // 以下はいくつかのプロパティです。理解できるはずです。もう言葉はありません!
        :label="子供.タイトル"
        :headImg="子供の頭"
        :pkid="子供.キー"
        :depth="depth+1" // これは各行のインデント スタイルを制御するために使用されます。具体的な使用法を確認するには、一番下に移動 => indent() します: selectStatus="children.selectStatus"
        v-bind="$attrs" // これら 2 つは、祖父母コンポーネントと孫コンポーネント間の通信を実装するために使用されます。v-on="$listeners"
      >
      </tree-custom>
    </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  name: 'TreeCustom', // コンポーネントに名前を付けます。それ以外の場合、データ（）を呼び出す方法{
    戻る {
      showChildren: true, // これはコンテンツを表示するかどうか、つまり展開したり折りたたんだりするかどうかを制御するデータです。
      currentInfoData: {} // これは現在の行のデータを取得するために使用されます。簡潔にするために、上記のコードの特定の使用法は私が削除しました。あまり意味がありません。}
  },
  //落とし穴を避けるために、オブジェクトのデフォルト値はファクトリー関数によって返されるべきです props: {
    ツリーデータ: {
      タイプ: 配列、
      デフォルト: () => []
    },
    ラベル: {
      タイプ: 文字列、
      デフォルト: () => ''
    },
    深さ：
      タイプ: 数値、
      デフォルト: () => 0
    },
    ヘッドイメージ: {
      タイプ: 文字列、
      デフォルト: () => ''
    },
    キッド:
      タイプ: 文字列、
      デフォルト: () => ''
    },
    選択ステータス: {
      タイプ: ブール値、
      デフォルト: () => null
    }
  },
  計算: {
    indent () { // 異なるレベルのインデントスタイルを定義します return { transform: `translate(${(this.depth - 1) * 15}px)` }
    }
  },
  メソッド: {
    トグルチャイルド（）{
      this.showChildren = !this.showChildren
    },
    チェックボックス選択変更 (e) {
      定数チェック = e.target.checked
      （チェックあり）{
       // $listeners メソッドを使用して祖先の関数を呼び出します。これは再帰コンポーネントなので、コンポーネントは厳密な親子関係を持たない可能性があるため、$emit や $parent などのメソッドは適切ではありません。this.$listeners.addSelectedData(this.currentInfoData)
      }
      チェックされている場合{
        this.$listeners.deleteSelectedData(this.currentInfoData)
      }
    },
    getCurrentInfo (ラベル、headImg、pkid) {
      this.currentInfoData = {
        キー: pkid、
        タイトル: ラベル、
        ヘッド:headImg
      }
    }
  }
}
</スクリプト>

/*コンポーネント呼び出しメソッド*/
<div class="tree-scroll">
  <ツリーカスタム
    :label="ツリーのタイトル"
    :headImg="ツリーのヘッド"
    :treeData="tree.children"
    :pkid="ツリーキー"
    :深さ= "0"
    :selectStatus="ツリー.selectStatus"
    @addSelectedData="選択されたデータを追加"
    @deleteSelectedData="選択したデータを削除" />
</div>