Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite

<Vorlage>
	  <div Klasse="Hauptkarte">
          <el-Zeile>
            <el-col :span="3">
              <div Klasse="Menü-alle">
                <div Klasse="Menükopf">
                  <span class="menu-head-title">Lagerverwaltung</span>/<span class="menu-head-title" @click="goBack"
                    >Großer Bildschirm</span>
                  >
                </div>
                <!-- <div class="menu-body">
                <div class="menu-item" @click="openTabs(item)" v-for="item in Menüelementen" :key="item">
                  <i class="el-icon-s-home" v-if="item.value === '01'"></i>{{ item.name }}
                </div>
              </div> -->
                <a-Menü
                  Modus="inline"
                  Thema="dunkel"
                  :openKeys="offeneSchlüssel"
                  v-Modell="AusgewählteSchlüssel"
                  @openChange="beiOpenChange"
                >
                  <a-sub-menu v-for="Element in Menüelementen" :key="Element.Wert">
                    <span slot="Titel"
                      ><a-icon type="appstore" /><span>{{ item.name }}</span></span
                    >
                    <a-Menüpunkt
                      v-für="Kinderelement in Element.Kinder"
                      :Schlüssel="childrenItem.value"
                      @click="Tabs hinzufügen(untergeordnetesElement)"
                      >{{ childrenItem.name }}
                    </a-Menüelement>
                  </a-Untermenü>
                </a-Menü>
              </div>
            </el-col>
            <el-col :span="21">
              <el-Zeile>
                <el-col :span="24">
                  <div>
                    <el-tabs v-model="editableTabsValue" type="card" schließbar @tab-remove="Tab entfernen">
                      <el-tab-pane v-for="Element in bearbeitbaren Tabs" :key="Element.name" :label="Element.title" :name="Element.name">
                        <Komponente: ist = "Artikel.Inhalt"></Komponente>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
</Vorlage>
<Skript>
	Standard exportieren {
		Daten(){
			zurückkehren {
				   openKeys: [], // Steuert das Ein- und Ausklappen des Menüs der ersten Ebene, um den Wert des Menüs der ersten Ebene zu speichern
      SelectedKeys: '', //Steuert das sekundäre Menü, um den sekundären Menüwert hervorzuheben und zu speichern
      //Seitliches Navigationsmenü-Array menuItems: [
        {
          Name: 'Eingehende und ausgehende Berichte',
          Wert: '0',
          Kinder: [
            {
              Name: 'Bericht über die Menge der eingehenden Bestellungen',
              Wert: '01',
              Inhalt: () => import('@/views/main/index/qtyReportIndex.vue'),
            },
            {
              Name: 'Meldung über die Anzahl der einzulagernden Einheiten',
              Wert: '02',
              Inhalt: () => import('@/views/main/index/qtyReportIndexQty.vue'),
            },
            {
              Name: 'Bericht über die Menge der zu versendenden Bestellungen',
              Wert: '03',
              Inhalt: () => import('@/views/main/index/handoverReportIndex.vue'),
            },
            {
              Name: 'Bericht über die Anzahl der auszuliefernden Einheiten',
              Wert: '04',
              Inhalt: () => import('@/views/main/index/handoverReportIndexQty.vue'),
            },
          ],
        },
        {
          Name: 'Vorhersage',
          Wert: '1',
          Kinder: [
            {
              Name: 'Ankunftsanmeldung',
              Wert: '11',
              Inhalt: () => import('@/views/main/index/asnHdrDockIndex.vue'),
            },
            {
              Name: 'Lagerauslastung',
              Wert: '12',
              Inhalt: () => import('@/views/main/index/whUteIndex.vue'),
            },
            {
              Name: 'Bestand im Lager',
              Wert: '13',
              Inhalt: () => import('@/views/main/index/imOdsStorageIndex.vue'),
            },
          ],
        },
        {
          Name: 'Indikator',
          Wert: '2',
          Kinder: [
            {
              Name: 'Einzellager-Abholrate',
              Wert: '201',
              Inhalt: () => import('@/views/main/index/singleWhDeliveryScaleIndex.vue'),
            },
            {
              Name: 'Transportzeit im Lager',
              Wert: '202',
              Inhalt: () => import('@/views/main/index/transitDurationInWhIndex.vue'),
            },
            {
              Name: 'SN wiederholen',
              Wert: '203',
              Inhalt: () => import('@/views/main/index/dwExceptionBarcodeIndex.vue'),
            },
            {
              Name: 'Tägliche Inventarliste',
              Wert: '204',
              Inhalt: () => import('@/views/main/index/inventoryRqIndex.vue'),
            },
            {
              Name: 'Überwachung des Datenbanktransferindikators',
              Wert: '205',
              Inhalt: () => import('@/views/main/index/transferIndexIndex.vue'),
            },
            {
              Name: 'Zusammenfassender Bericht zur Kommissionierortanalyse',
              Wert: '206',
              Inhalt: () => import('@/views/main/index/pickingByLocSumIndex.vue'),
            },
            {
              Name: „Berichtszusammenfassung wird geladen“,
              Wert: '207',
              Inhalt: () => import('@/views/main/index/loadingSummaryIndex.vue'),
            },
            {
              Name: 'Fehlerrate ausgehender SN',
              Wert: '208',
              Inhalt: () => import('@/views/main/index/dwBarcodeErrorRptIndex.vue'),
            },
            {
              Name: 'Details zur Kommissionierortanalyse',
              Wert: '209',
              Inhalt: () => import('@/views/main/index/dwPickFxmxIndex.vue'),
            },
            {
              Name: 'Lagerbereichsdimensionierung nicht auf Batchkommissionierung basierend',
              Wert: '210',
              Inhalt: () => Import('@/views/main/index/notPickingByBatchIndex.vue'),
            },
          ],
        },
      ],
      editableTabsValue: '', //Das aktuell aktive Element auf der Registerkartenseite
      editableTabs: [], //Registerkarten-Array }
		},
		Methoden:{
	// Methode um von anderen Seiten zur Startseite zu springen und die Registerkarte zu öffnen // goTable(item) {
     // dies.openKeys = [item.value.substring(0, 1)]
     // diese.SelectedKeys = Artikel.Wert
     // dies.$store.commit('updateHomeOrIndexSwitch', false)
     // dies.openTabs(Element)
    //},
		addTab(Element) {
      lass onOff = false;
      this.editableTabs.forEach((x) => {
        wenn (x.name == Artikel.name) {
           this.editableTabsValue = Artikelname
           einAus=wahr
           zurückkehren;
        }
      })
      wenn(!anAus){
      dies.editableTabs.push({
        Titel: Artikelname,
        Name: Artikelname,
        Inhalt: Element.Inhalt,
      })
      this.editableTabsValue = Artikelname
      }
    },
    //Schließen Sie die Registerkarte, um targetName = item.name auszulösen.
    removeTab(Zielname) {
      let tabs = diese.editableTabs
      let activeName = this.editableTabsValue
      wenn (aktiverName === zielName) {
        tabs.fürJeden((tab, index) => {
          wenn (tab.name === zielName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            wenn (nächsterTab) {
              aktiverName = nächsterTab.name
            } anders {
              dies.openKeys = []
              diese.SelectedKeys = ''
            }
          }
        })
      }
      this.editableTabsValue = aktiverName
      this.editableTabs = tabs.filter((tab) => tab.name !== Zielname)
    },
		},
		betrachten:{
			    editierbarerTabsWert(Wert) {
      dies.menuItems.forEach((menuItem) => {
        wenn (Menüelement.Kinder) {
          menuItem.children.fürJedes((childrenItem) => {
            wenn (childrenItem.name === val) {
              this.openKeys = [childrenItem.value.substring(0, 1)]
              dies.SelectedKeys = childrenItem.value
              zurückkehren
            }
          })
        }
      })
    },
		}
	}
</Skript>