Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

<Vorlage>
  <div id="BaumMenü">
    <div v-for="(Knoten, Index) in Knoten" :class="{'TreeMenu-row-border-bottom': !depth}">
      <div Klasse="TreeMenu-row">
        <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/selected.png" @click="selectNode(0,node)" v-show="node.IsSelected"/>
        <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/select.png" @click="selectNode(1,node)" v-show="!node.IsSelected"/>
        <div Klasse = "TreeMenu-row-firstdiv" :Klasse = "{'TreeMenu-row-border-bottom': node.ChildTypeList&&node.IsExpanded }" @click = "expandNode(!node.IsExpanded,node)">
          <label v-text="Knoten.Name"></label>
          <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/top.png" v-if="node.ChildTypeList" v-show="!node.IsExpanded">
          <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/down.png" v-if="node.ChildTypeList" v-show="node.IsExpanded">
        </div>
        <TreeMenu :nodes="node.ChildTypeList" :fatherIndex="index" :depth="tiefe+1" v-on:selectFatherNode="selectFatherNode" v-if="node.ChildTypeList" v-show="!node.IsExpanded"></TreeMenu>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
  Standard exportieren{
    Name: "TreeMenu",
    Daten () {
      zurückkehren {
        Warentyp: {
          AUSWEIS: '',
          Übergeordnete ID: '',
          Name: '',
          Code: '',
          Stufe: 0,
          ImgUrl: null,
          UntergeordneteTypliste: []
        }
      }
    },
    Requisiten: {
      Knoten: {
        Typ: Array,
        Standard: () => {
          zurückkehren []
        }
      },
      VaterIndex: {
        Typ: Nummer,
        Standard: 0
      },
      Tiefe:
        Typ: Nummer,
        Standard: 0
      }
    },
    betrachten: {},
    erstellt () {},
    montiert () {},
    zerstört () {},
    Methoden: {
      // Aktuellen Knoten auswählen/abbrechen selectNode (choice, node) {
        node.IsSelected = Auswahl
        dies.selectChildrenNode(Auswahl, Knoten.ChildTypeList || [])
        dies.$emit('selectFatherNode', Auswahl, dies.fatherIndex, dies.nodes.every((node) => { return node.IsSelected === Auswahl }))
      },
      // Ändere den ausgewählten Status der untergeordneten Knoten selectChildrenNode (choice, nodes, self) {
        lass _self = self || dies
        nodes.forEach((node) => { node.IsSelected = Auswahl; _self.selectChildrenNode(Auswahl, node.ChildTypeList || [], _self) })
      },
      //Überprüfen, ob der ausgewählte Status als übergeordneter Knoten geändert werden muss (nur für Aufrufe untergeordneter Knoten)
      selectFatherNode (Auswahl, Index, Kinderstatus) {
        wenn (Auswahl) {
          // Wenn alle untergeordneten Knoten unter dem Knoten [Index] ausgewählt sind, sollte der Knoten [Index] ausgewählt werden, wenn (childrenState) {
            this.nodes[index].IsSelected = Auswahl
            dies.$emit('selectFatherNode', Auswahl, dies.fatherIndex, dies.nodes.every((node) => { return node.IsSelected === Auswahl }))
          }
        } anders {
          // Wenn ein untergeordneter Knoten unter dem Knoten [Index] nicht ausgewählt ist, sollte die Auswahl des Knotens [Index] aufgehoben werden. this.nodes[index].IsSelected = Auswahl
          dies.$emit('selectFatherNode', Auswahl, this.fatherIndex, falsch)
        }
      },
      // Den aktuellen Knoten erweitern/reduzieren expandNode (Auswahl, Knoten) {
        node.IsExpanded = Auswahl
        wenn (!Wahl) {
          this.expandChildrenNode(Auswahl, Knoten.ChildTypeList)
        }
      },
      // untergeordnete Knoten ausblenden expandChildrenNode (Auswahl, Knoten, selbst) {
        lass _self = self || dies
        nodes.forEach((node) => { node.IsExpanded = Auswahl; _self.expandChildrenNode(Auswahl, node.ChildTypeList || [], _self) })
      }
    }
  }
</Skript>

<style lang="scss" scoped>
  #BaumMenü {
    .TreeMenu-Zeile{
      Rand links: 30px;
      Schriftgröße: 15px;
      Polsterung: 12px 0 0 0;
    }
    .TreeMenu-row-firstdiv{
      Höhe: 32px;
      Rand links: 30px;
    }
    .TreeMenu-row-arrowimg{
      schweben: rechts;
      Rand rechts: 15px;
      Breite: 13px;
    }
    .TreeMenu-row-selectimg{
      schweben: links;
      Breite: 18px;
      vertikale Ausrichtung: Text unten;
    }
    .TreeMenu-row-border-bottom{
      Rahmen unten: durchgezogen 1px #e6e6e6;
    }
    .TreeMenu-row-border-top{
      Rahmen oben: durchgezogen 1px #e6e6e6;
    }
  }
</Stil>