Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

<テンプレート>
	  <div class="メインカード">
          <el-行>
            <el-col :span="3">
              <div class="menu-all">
                <div class="menu-head">
                  <span class="menu-head-title">倉庫管理</span>/<span class="menu-head-title" @click="goBack"
                    >大画面</span>
                  >
                </div>
                <!-- <div class="menu-body">
                <div class="menu-item" @click="openTabs(item)" v-for="menuItems 内の項目" :key="item">
                  <i class="el-icon-s-home" v-if="item.value === '01'"></i>{{ item.name }}
                </div>
              </div> -->
                <a-メニュー
                  モード="インライン"
                  テーマ="ダーク"
                  :openKeys="オープンキー"
                  v-model="選択されたキー"
                  @openChange="onOpenChange"
                >
                  <a-sub-menu v-for="メニュー項目内の項目" :key="item.value">
                    <span スロット="タイトル"
                      ><a-icon type="appstore" /><span>{{ item.name }}</span></span
                    >
                    <メニュー項目
                      v-for="item.children 内の childrenItem"
                      :key="子アイテム.値"
                      @click="addTabs(childrenItem)"
                      >{{ childrenItem.name }}
                    </a-メニュー項目>
                  </a-サブメニュー>
                </a-メニュー>
              </div>
            </el-col>
            <el-col :span="21">
              <el-行>
                <el-col :span="24">
                  <div>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                      <el-tab-pane v-for="編集可能なタブ内の項目" :key="item.name" :label="item.title" :name="item.name">
                        <コンポーネント :is="item.content"></コンポーネント>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		データ（）{
			戻る {
				   openKeys: [], //第一レベルメニューの折りたたみと展開を制御して、第一レベルメニューの値を保存します
      SelectedKeys: '', //セカンダリメニューを制御して、セカンダリメニューの値を強調表示して保存します
      //サイドナビゲーションメニュー配列 menuItems: [
        {
          名前: 「受信レポートと送信レポート」
          値: '0'、
          子供たち： [
            {
              名前: 「受注数量レポート」
              値: '01'、
              コンテンツ: () => import('@/views/main/index/qtyReportIndex.vue'),
            },
            {
              名前: '保管するユニット数に関するレポート'、
              値: '02'、
              コンテンツ: () => import('@/views/main/index/qtyReportIndexQty.vue'),
            },
            {
              名前: 「出荷予定の注文数量レポート」
              値: '03'、
              コンテンツ: () => import('@/views/main/index/handoverReportIndex.vue'),
            },
            {
              名前: 「出荷予定ユニット数レポート」
              値: '04'、
              コンテンツ: () => import('@/views/main/index/handoverReportIndexQty.vue'),
            },
          ]、
        },
        {
          名前: 「予測」、
          値: '1'、
          子供たち： [
            {
              名前: 「到着登録」
              値: '11'、
              コンテンツ: () => import('@/views/main/index/asnHdrDockIndex.vue'),
            },
            {
              名前:「倉庫利用率」
              値: '12',
              コンテンツ: () => import('@/views/main/index/whUteIndex.vue'),
            },
            {
              名前: 「倉庫内の在庫」
              値: '13',
              コンテンツ: () => import('@/views/main/index/imOdsStorageIndex.vue'),
            },
          ]、
        },
        {
          名前: 'インジケーター'、
          値: '2'、
          子供たち： [
            {
              名前: 「単一倉庫集荷率」
              値: '201',
              コンテンツ: () => import('@/views/main/index/singleWhDeliveryScaleIndex.vue'),
            },
            {
              名前: 「倉庫内の輸送時間」
              値: '202',
              コンテンツ: () => import('@/views/main/index/transitDurationInWhIndex.vue'),
            },
            {
              名前: 'SN の繰り返し'、
              値: '203',
              コンテンツ: () => import('@/views/main/index/dwExceptionBarcodeIndex.vue'),
            },
            {
              名前: 「日次在庫リスト」
              値: '204',
              コンテンツ: () => import('@/views/main/index/inventoryRqIndex.vue'),
            },
            {
              名前: 「データベース転送インジケーター監視」
              値: '205',
              コンテンツ: () => import('@/views/main/index/transferIndexIndex.vue'),
            },
            {
              名前: 「ピッキング場所分析概要レポート」
              値: '206',
              コンテンツ: () => import('@/views/main/index/pickingByLocSumIndex.vue'),
            },
            {
              名前: 'レポートの概要を読み込んでいます',
              値: '207',
              コンテンツ: () => import('@/views/main/index/loadingSummaryIndex.vue'),
            },
            {
              名前: '送信SNエラー率'、
              値: '208',
              コンテンツ: () => import('@/views/main/index/dwBarcodeErrorRptIndex.vue'),
            },
            {
              名前: 「ピッキング場所分析の詳細」
              値: '209',
              コンテンツ: () => import('@/views/main/index/dwPickFxmxIndex.vue'),
            },
            {
              名前: 'バッチピッキングに基づかない保管エリアディメンション'、
              値: '210',
              コンテンツ: () => import('@/views/main/index/notPickingByBatchIndex.vue'),
            },
          ]、
        },
      ]、
      editableTabsValue: '', //タブページ上で現在アクティブな項目
      editableTabs: [], //タブページ配列 }
		},
		方法:{
	// 他のページからホームページにジャンプしてタブページを開くために使用されるメソッド // goTable(item) {
     // this.openKeys = [item.value.substring(0, 1)]
     // this.SelectedKeys = item.value
     // this.$store.commit('updateHomeOrIndexSwitch', false)
     // this.openTabs(アイテム)
    //,
		タブを追加(アイテム) {
      onOff を false にします。
      this.editableTabs.forEach((x) => {
        if (x.name == item.name) {
           this.editableTabsValue = アイテム名
           オンオフ=true
           戻る;
        }
      })
      if(!onOff){
      this.editableTabs.push({
        タイトル: アイテム名、
        名前: アイテム名、
        コンテンツ: アイテム.コンテンツ、
      })
      this.editableTabsValue = アイテム名
      }
    },
    //タブページを閉じてトリガーする targetName = item.name
    削除タブ(ターゲット名) {
      タブを this.editableTabs とします
      activeName = this.editableTabsValue とします
      アクティブ名 === ターゲット名の場合 {
        tabs.forEach((タブ、インデックス) => {
          if (tab.name === targetName) {
            nextTab = tabs[index + 1] || tabs[index - 1]とします
            if (次のタブ) {
              アクティブ名 = 次のタブ名
            } それ以外 {
              this.openKeys = []
              this.SelectedKeys = ''
            }
          }
        })
      }
      this.editableTabsValue = アクティブ名
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },
		},
		時計：{
			    編集可能なタブ値(val) {
      this.menuItems.forEach((メニュー項目) => {
        メニュー項目の子の場合
          メニュー項目.children.forEach((childrenItem) => {
            if (childrenItem.name === val) {
              this.openKeys = [childrenItem.value.substring(0, 1)]
              this.SelectedKeys = childrenItem.value
              戻る
            }
          })
        }
      })
    },
		}
	}
</スクリプト>