Vue implementiert Baumtabelle durch Elementbaumsteuerung

<Vorlage>
    <div Klasse="meinBaum">
          <el-Baum
              :data="Baumdaten"
              :props="StandardProps"
              @node-click="Klick auf Knoten handhaben"
              Einzug="0"
              :render-content="Renderinhalt"
          ></el-Baum>
        </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, ref } von 'vue'
exportiere StandarddefiniereKomponente({
    Komponenten: {},
    Daten() {
        zurückkehren {
              Baumdaten: [
        {
          // Typ: 1,
          Bezeichnung: 'notice-id1',
                  Kinder: [
                        {
                          Bezeichnung: ['Satellitennamencode', 'ZOHREH-2'],
                        },
                        {
                          Bezeichnung: ['Organisation', 'IRN'],
                        },
                        {
                          Bezeichnung: ['Frequenzbereich', '10950-1450'],
                        },
                        {
                          Bezeichnung: '[obere Reihe] Balkenname',
                          Kinder: [
                              {
                                  Bezeichnung: ['Name', 'RS49'],
                              },
                             {
                                  Bezeichnung:['freq_min','10950'],
                              },
                             {
                                  Bezeichnung: ['freq_max','14500'],
                              },
                              {
                                  Bezeichnung:[]'Gruppe('+'3'+')','']
                                  Kinder:[
                                     {
                                        Bezeichnung: ['10600361','10950','11200','0']
                                     },
                                    {
                                        Bezeichnung: ['10600361','10950','11200','0']
                                     },
                                    {
                                        Bezeichnung: ['10600361','10950','11200','0']
                                     }
                                  ]
                              }
                      ]
                    },
                  ],
                },
              ],
            Standardeigenschaften: {
            Kinder: 'Kinder',
            Bezeichnung: "Bezeichnung",
          },
        }
    },
    Verfahren:{
    // Benutzerdefinierte Baumsteuerungsfunktion node stellt jeden Knoten dar renderContent(h,{node,data,store}){
        //div stellt eine Zeile des Baumsteuerelements dar und div enthält drei Span-Tags // Bestimmen Sie die Anzahl der Beschriftungsarrays des Knotens und wählen Sie die Klasse durch eine ternäre Operation aus
        // Legen Sie die Klasse fest, mit der die Ausrichtung des Baumsteuerelements gesteuert werden soll return h('div',[
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {Klasse:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
          ]);
    },
    }
})
</Skript>
<style lang="scss" scoped>
.nodeStyle{
  Breite: 110px;
  Anzeige: Inline-Block;
  Textausrichtung: links;
}
.Gruppenstil{
  Breite: 150px;
  Anzeige: Inline-Block;
  Textausrichtung: links;
}
</Stil>