Vue Element-ui implementiert Baumsteuerungsknoten und fügt Symbole hinzu, detaillierte Erläuterung

   Kinder: [
       {
           Symbol: „el-Symbol oben rechts“,
           Bezeichnung: ['Strahlname',''],
           Kinder: [
               {
                   Bezeichnung: ['Name', 'RS49'],
               },
               {
                   Symbol: „src/assets/images/Organization.png“,
                   Bezeichnung: ['Gruppe('+'3'+')','']
                   Kinder:[
                   {
                   Bezeichnung: ['10600361','10950','11200','0']
                    }
   					]
				}
           ]
		}
    ],

    renderContent(h,{Knoten,Daten,Speicher}){
        //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',[
          // Symbol- und Bild-Tags in der benutzerdefinierten Funktion des Baumsteuerelements hinzufügen // Das img-Tag muss die Adresse seines eigenen Bildes hinzufügen h('span',{class:'top-right'}),
          h('img',{src:data.icon}),
          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])
          ]);
    },

<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'],
                        },
                        {
                          Symbol: „el-Symbol oben rechts“,
                          Bezeichnung: ['Strahlname',''],
                          Kinder: [
                              {
                                  Bezeichnung: ['Name', 'RS49'],
                              },
                             {
                                  Bezeichnung:['freq_min','10950'],
                              },
                             {
                                  Bezeichnung: ['freq_max','14500'],
                              },
                              {
                                  Symbol: „src/assets/images/Organization.png“,
                                  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',[
          // Symbol- und Bildbeschriftungen in der benutzerdefinierten Funktion h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}) hinzufügen,
          h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}),
          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>