Vue实现侧边导航栏于Tab页关联的示例代码

<template>	  <div class="main-card">          <el-row>            <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="item in menuItems" :key="item">                  <i class="el-icon-s-home" v-if="item.value === '01'"></i>{{ item.name }}                </div>              </div> -->                <a-menu                  mode="inline"                  theme="dark"                  :openKeys="openKeys"                  v-model="SelectedKeys"                  @openChange="onOpenChange"                >                  <a-sub-menu v-for="item in menuItems" :key="item.value">                    <span slot="title"                      ><a-icon type="appstore" /><span>{{ item.name }}</span></span                    >                    <a-menu-item                      v-for="childrenItem in item.children"                      :key="childrenItem.value"                      @click="addTabs(childrenItem)"                      >{{ childrenItem.name }}                    </a-menu-item>                  </a-sub-menu>                </a-menu>              </div>            </el-col>            <el-col :span="21">              <el-row>                <el-col :span="24">                  <div>                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">                      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">                        <component :is="item.content"></component>                      </el-tab-pane>                    </el-tabs>                  </div>                </el-col>              </el-row>            </el-col>          </el-row>        </div></template><script>	export default {		data(){			return{				   openKeys: [],//控制一级菜单折叠展开的数组 存放一级菜单的value      SelectedKeys: '',//控制二级菜单高亮 存放二级菜单value      //侧边导航菜单数组      menuItems: [        {          name: '应入应出报表',          value: '0',          children: [            {              name: '应入库单量报表',              value: '01',              content: () => import('@/views/main/index/qtyReportIndex.vue'),            },            {              name: '应入库台数报表',              value: '02',              content: () => import('@/views/main/index/qtyReportIndexQty.vue'),            },            {              name: '应出库单量报表',              value: '03',              content: () => import('@/views/main/index/handoverReportIndex.vue'),            },            {              name: '应出库台数报表',              value: '04',              content: () => import('@/views/main/index/handoverReportIndexQty.vue'),            },          ],        },        {          name: '预测',          value: '1',          children: [            {              name: '到货登记',              value: '11',              content: () => import('@/views/main/index/asnHdrDockIndex.vue'),            },            {              name: '仓库利用率',              value: '12',              content: () => import('@/views/main/index/whUteIndex.vue'),            },            {              name: '库内库存',              value: '13',              content: () => import('@/views/main/index/imOdsStorageIndex.vue'),            },          ],        },        {          name: '指标',          value: '2',          children: [            {              name: '单仓提货率',              value: '201',              content: () => import('@/views/main/index/singleWhDeliveryScaleIndex.vue'),            },            {              name: '中转在库时长',              value: '202',              content: () => import('@/views/main/index/transitDurationInWhIndex.vue'),            },            {              name: '重复SN',              value: '203',              content: () => import('@/views/main/index/dwExceptionBarcodeIndex.vue'),            },            {              name: '盘点日清单',              value: '204',              content: () => import('@/views/main/index/inventoryRqIndex.vue'),            },            {              name: '移库指标监控',              value: '205',              content: () => import('@/views/main/index/transferIndexIndex.vue'),            },            {              name: '拣货库位分析汇总报表',              value: '206',              content: () => import('@/views/main/index/pickingByLocSumIndex.vue'),            },            {              name: '装车报表汇总',              value: '207',              content: () => import('@/views/main/index/loadingSummaryIndex.vue'),            },            {              name: '出库SN报错率',              value: '208',              content: () => import('@/views/main/index/dwBarcodeErrorRptIndex.vue'),            },            {              name: '拣货库位分析明细',              value: '209',              content: () => import('@/views/main/index/dwPickFxmxIndex.vue'),            },            {              name: '不按批次拣货库区维度',              value: '210',              content: () => import('@/views/main/index/notPickingByBatchIndex.vue'),            },          ],        },      ],      editableTabsValue: '',//tab页当前active的item      editableTabs: [],//tab页数组			}		},		methods:{	// 用于其他页面跳转来到主页并打开tab页的方法	//	 goTable(item) {     // this.openKeys = [item.value.substring(0, 1)]     // this.SelectedKeys = item.value     // this.$store.commit('updateHomeOrIndexSwitch', false)     // this.openTabs(item)    //},		addTab(item) {      let onOff = false;      this.editableTabs.forEach((x) => {        if (x.name == item.name) {           this.editableTabsValue = item.name           onOff=true           return;        }      })      if(!onOff){      this.editableTabs.push({        title: item.name,        name: item.name,        content: item.content,      })      this.editableTabsValue = item.name      }    },    //关闭tab页触发 targetName = item.name    removeTab(targetName) {      let tabs = this.editableTabs      let activeName = this.editableTabsValue      if (activeName === targetName) {        tabs.forEach((tab, index) => {          if (tab.name === targetName) {            let nextTab = tabs[index + 1] || tabs[index - 1]            if (nextTab) {              activeName = nextTab.name            } else {              this.openKeys = []              this.SelectedKeys = ''            }          }        })      }      this.editableTabsValue = activeName      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)    },		},		watch:{			    editableTabsValue(val) {      this.menuItems.forEach((menuItem) => {        if (menuItem.children) {          menuItem.children.forEach((childrenItem) => {            if (childrenItem.name === val) {              this.openKeys = [childrenItem.value.substring(0, 1)]              this.SelectedKeys = childrenItem.value              return            }          })        }      })    },		}	}</script>