Methode zur Implementierung rekursiver Komponenten basierend auf der Vue-Technologie

<!--Baum-Baumkomponente-->
<Vorlage>
  <div Klasse="Container">
      <div v-for="Element in treeData" :key="Element">
        <div Klasse="Zeile" @click="erweitern(Element)">
            <span
                ref="Symbol"
                Klasse = "Symbol-allgemein"
                :Klasse="{
                    'Symbol nach unten': Element.Kinder,
                    'Symbol-Radio': !item.children,
                    „Symbol drehen“: item.isExtend
                }"
            ></span>
            <span class="title">{{ Artikel.title }}</span>
        </div>
        <div v-if="isExtend(item)" Klasse="Kinder">
            <tree :tree-data="item.children" :is-extend-all="isExtendAll" />
        </div>
  </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
    Requisiten: {
        // Komponentendaten treeData: {
            Typ: Array,
            Standard: [],
        },
        // Ob standardmäßig alles erweitert werden soll, isExtendAll: {
            Typ: Boolean,
            Standard: true,
        }
    },
    Methoden: {
        // Erweitere die Liste extend(item) {
            wenn (Element.Kinder) {
                } item.isExtend = !item.isExtend;
            }
        },
        istErweitern(Element) {
            const isExtend = !item.isExtend && true;
            gibt dies zurück.isExtendAll ? isExtend : !isExtend;
        }
    }
}
</Skript>

<Stilbereich>
.container {
    Schriftgröße: 14px;
}
.Reihe {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Cursor: Zeiger;
    Rand unten: 10px;
}
/* ----------- Symbolstil START ------------- */
.icon-gemeinsam {
    Anzeige: Inline-Block;
    Übergang: alle 0,3 s;
}
.Symbol nach unten {
    Breite: 0;
    Höhe: 0;
    Rand: 4px durchgehend transparent;
    Rahmen oben: 6px durchgezogen #000;
    Rahmen unten: keiner;
}
.icon-radio {
    Breite: 6px;
    Höhe: 6px;
    Hintergrund: #000;
    Randradius: 50 %;
}
.Symbol drehen {
    transformieren: drehen (-90 Grad);
}
/* ----------- Symbolstil ENDE ------------- */
.Titel {
    Rand links: 10px;
}
.Kinder {
    Polsterung links: 20px;
}
</Stil>

<Vorlage>
 <Baum: Baumdaten="Baumdaten" />
</Vorlage>

<Skript>
importiere Tree aus „./components/tree.vue“;

Standard exportieren {
 Komponenten:
  Baum,
 },
 Daten() {
  zurückkehren {
   Baumdaten: [
    {
     Titel: „Ebene 1 Liste 1“,
     Kinder: [
      {
       Titel: 'Sekundäre Liste 1',
                            Kinder: [
                                {
                                    Titel: „Level 3 Liste 1“,
                                }
                            ]
      },
      {
       Titel: 'Sekundäre Liste 2',
      }
     ]
    },
    {
     Titel: 'Ebene 1 Liste 2',
     Kinder: [
      {
       Titel: 'Sekundäre Liste 1',
      },
      {
       Titel: 'Sekundäre Liste 2',
      }
     ]
    },
    {
     Titel: „Level 1 Liste 3“,
     Kinder: [
      {
       Titel: „Level 3 Liste 1“,
      },
      {
       Titel: „Level 3 Liste 2“,
      },
      {
       Titel: „Level 3 Liste 3“,
      }
     ]
    }
   ]
  }
 }
}
</Skript>