Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen

Hauptdaten: {
  Wert: "root",
  Kinder:[{
    Wert: "Level 1-1",
    Kinder:[{
      Wert: "Level 2-1",
      Kinder:[{
          Wert: "Level 3-1",
          Kinder:[]
       }]
     },{
       Wert: "Level 2-2",
       Kinder:[]
     }]
   },{
      Wert: "Level 1-2",
      Kinder:[]
   }]
}

<Vorlage>
<div>
  <div Klasse="Demo">
    {{treeData.Wert}}
    <tree-comp v-for="(Element, Index) in treeData.children" :treeData="Element"></tree-comp>
  </div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "treeComp",
  Requisiten:{
    Baumdaten: {
      Standard: Funktion(){
        zurückkehren {}
      }
    }
  },
  montiert(){},
  Methoden:{}
}
</Skript>
<style lang="less" scoped>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px gestrichelt #999;
    &:vor{Inhalt:'--';Anzeige: Inline-Block;Padding:0 4px;}
  }
</Stil>

<Vorlage>
  <tree-comp:treeData="Hauptdaten"></tree-comp>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "treeMain",
  Daten () {
    zurückkehren {
      Hauptdaten: {
        Wert: "root",
        Kinder:[
          {
            Wert: "Level 1-1",
            Kinder:[{
              Wert: "Level 2-1",
              Kinder:[{
                Wert: "Level 3-1",
                Kinder:[]
              }]
            },{
              Wert: "Level 2-2",
              Kinder:[]
            }]
          },{
            Wert: "Level 1-2",
            Kinder:[]
          }
        ]
      }
    }
  },
  Komponenten: {
    "Baumkomp": () => import('./TreeComp')
  },
  montiert(){},
  Methoden:{}
}
</Skript>

<Vorlage>
  <tree-comp:treeData="Hauptdaten"></tree-comp>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "treeRender",
  Daten () {
    zurückkehren {
      Hauptdaten: {
        Wert: "root",
        Kinder:[
          {
            Wert: "Level 1-1",
            Kinder:[{
              Wert: "Level 2-1",
              Kinder:[{
                Wert: "Level 3-1",
                Kinder:[]
              }]
            },{
              Wert: "Level 2-2",
              Kinder:[]
            }]
          },{
            Wert: "Level 1-2",
            Kinder:[]
          }
        ]
      }
    }
  },
  Komponenten: {
    Baumkomp:{
      funktional: wahr,
      Requisiten: {treeData: Objekt},
      rendern(h, {Eigenschaften: {treeData = {}}}) {
        const creatNode = (Knoten)=>{
          wenn(Knoten.Kinder && Knoten.Kinder.Länge > 0){
            lass hArr = node.children.map(item=>{
              returniere createNode(Element)
            })
            returniere h('div', {Klasse:'demo'}, [Knoten.Wert, hArr])
          }anders{
            returniere h('div', {Klasse:'demo'}, [Knoten.Wert])
          }          
        }
        returniere Knoten erstellen(Baumdaten)
      },
    }
  },
  montiert(){},
  Methoden:{}
}
</Skript>
<style lang="less" scoped>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px gestrichelt #999;
    &:vor{Inhalt:'--';Anzeige: Inline-Block;Padding:0 4px;}
  }
</Stil>