Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung

Baum: {
        Titel: '', // Titel (Name) 
        Schlüssel: '0',
        Kopf: '', // Avatar selectStatus: false, // Kontrollkästchen ausgewählt Status children: [
          {
            Titel: 'Wangwang Episode 1',
            Taste: '0-0',
            Kopf: '',
            selectStatus: false,
            Kinder: [
              {
                Schlüssel: '0-0-0',
                Titel: 'Wangzai 1',
                Kopf: erfordern('@/assets/wan.jpg'),
                selectStatus: false
              }
            ]
          },
          {
            Titel: 'Wangwang Teil 2',
            Taste: '0-1',
            Kopf: '',
            selectStatus: false,
            Kinder: [
              {
                Titel: „Erste Mannschaft der zweiten Liga von Wangwang“,
                Schlüssel: '0-1-0',
                Kopf: '',
                selectStatus: false,
                Kinder: [
                  {
                    Titel: 'Wangwang Zweite Liga, Mannschaft 1, Klasse 1',
                    Schlüssel: '0-1-0-2',
                    Kopf: '',
                    selectStatus: false,
                    Kinder: [
                      {
                        Titel: 'Wang Zai 3',
                        Schlüssel: '0-1-0-2-0',
                        Kopf: erfordern('@/assets/wan.jpg'),
                        selectStatus: false
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

/*Der Kern des benutzerdefinierten Tree Controls ist „die Komponente ruft sich selbst auf“. Hier wird das Tree Control in eine Unterkomponente gekapselt*/
<Vorlage>
  <div>
    <div Klasse="Baum-Benutzerdefiniert">
      <div :style="indent" @click="toggleChildren"> //Das toggleChildren-Ereignis ist ein Steuerungsereignis für „Inhalt erweitern“ und „Inhalt schließen“/* 
       Hier ist der spezifische Inhalt der rekursiven Datenanzeige. Der spezifische Inhalt der Rekursion in diesem Projekt ist beispielsweise „Bild/Avatar“, „Titel/Name“, „null/Kontrollkästchen“ aus dem Effektdiagramm.
       Das Wirkungsdiagramm zeigt die Logik:
       <div v-if="!headImg && label" >
       //Wenn kein Avatarbild einen Titel hat, zeige den „Pfeiltitel“-Stil an</div>
        <div v-if="headImg">
       //Wenn ein Avatarbild vorhanden ist, zeige den Stil „avatar-name-checkBox“ an</div>
       */      
      </div>
      <tree-custom // "ruft sich selbst auf"
        :key="children.key" // Schlüsselwert ist eindeutig v-for="children in treeData"  
        v-if="showChildren" // Bestimmen Sie, ob der Inhalt basierend auf dem Ereignis "toggleChildren" erweitert werden soll:treeData="children.children" // Im Folgenden sind einige Eigenschaften aufgeführt, die Sie verstehen sollten! Keine weiteren Worte!
        :label="Kinder.Titel"
        :headImg="Kinder.Kopf"
        :pkid="Kinder.Schlüssel"
        :depth="depth+1" // Dies wird verwendet, um den Einrückungsstil jeder Zeile zu steuern. Sie können nach unten => indent () gehen, um die spezifische Verwendung anzuzeigen: selectStatus="children.selectStatus"
        v-bind="$attrs" // Diese beiden werden verwendet, um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu implementieren. v-on="$listeners"
      >
      </Baum-benutzerdefiniert>
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'TreeCustom', // Geben Sie unserer Komponente einen Namen! Andernfalls, wie Sie data () aufrufen {
    zurückkehren {
      showChildren: true, // Dies sind die Daten, die steuern, ob der Inhalt angezeigt wird, also erweitert und reduziert wird!
      currentInfoData: {} // Dies wird verwendet, um die Daten der aktuellen Zeile abzurufen. Der Einfachheit halber habe ich die spezifische Verwendung des obigen Codes gelöscht ~ sie ist nicht sehr aussagekräftig}
  },
  //Der Standardwert des Objekts sollte von einer Factory-Funktion zurückgegeben werden, um Fallstricke zu vermeiden props: {
    Baumdaten: {
      Typ: Array,
      Standard: () => []
    },
    Etikett: {
      Typ: Zeichenfolge,
      Standard: () => '
    },
    Tiefe:
      Typ: Nummer,
      Standard: () => 0
    },
    KopfBild: {
      Typ: Zeichenfolge,
      Standard: () => '
    },
    p-Kind:
      Typ: Zeichenfolge,
      Standard: () => '
    },
    wähleStatus: {
      Typ: Boolean,
      Standard: () => null
    }
  },
  berechnet: {
    indent () { // Verschiedene Ebenen von Einrückungsstilen definieren return { transform: `translate(${(this.depth - 1) * 15}px)` }
    }
  },
  Methoden: {
    Untergeordnete Elemente umschalten () {
      dies.showChildren = !diese.showChildren
    },
    checkBoxSelectChange (e) {
      const geprüft = e.target.geprüft
      wenn (aktiviert) {
       //Verwenden Sie die Methode $listeners, um die Funktion des Vorgängers aufzurufen. Da es sich um eine rekursive Komponente handelt, haben die Komponenten möglicherweise keine strikte Eltern-Kind-Beziehung, sodass Methoden wie $emit und $parent nicht geeignet sind this.$listeners.addSelectedData(this.currentInfoData)
      }
      wenn (!aktiviert) {
        dies.$listeners.deleteSelectedData(dies.currentInfoData)
      }
    },
    getCurrentInfo (Bezeichnung, Kopfbild, pkid) {
      dies.currentInfoData = {
        Schlüssel: pkid,
        Titel: Etikett,
        Kopf:KopfBild
      }
    }
  }
}
</Skript>

/*Komponentenaufrufmethode*/
<div Klasse="Baum-Scroll">
  <Baum-Benutzerdefiniert
    :label="Baum.Titel"
    :headImg="Baum.Kopf"
    :treeData="Baum.Kinder"
    :pkid="Baum.Schlüssel"
    :Tiefe="0"
    :selectStatus="Baum.selectStatus"
    @addSelectedData="AusgewählteDaten hinzufügen"
    @deleteSelectedData="deleteSelectedData" />
</div>