技术栈

侧边栏用 Antd
tab使用element

效果

<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-menumode="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-itemv-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: [],//控制一级菜单折叠展开的数组 存放一级菜单的valueSelectedKeys: '',//控制二级菜单高亮 存放二级菜单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的itemeditableTabs: [],//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.nameonOff=truereturn;}})if(!onOff){this.editableTabs.push({title: item.name,name: item.name,content: item.content,})this.editableTabsValue = item.name}},//关闭tab页触发 targetName = item.nameremoveTab(targetName) {let tabs = this.editableTabslet activeName = this.editableTabsValueif (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 = activeNamethis.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.valuereturn}})}})},}}
</script>

分析

这一套组件不能单凭element一个单一框架实现，侧边导航栏我们需要控制折叠,控制高亮,以及菜单组三个参数,而element的导航菜单控制折叠展开菜单组的参数是一个函数@open控制,所以我们没有办法通过代码去控制某个菜单组的展开收起所以跨框架做了这么一个功能记录一下

Vue实现侧边导航栏于Tab页关联相关推荐

Flutter 底部导航栏（Tab 页）的快速实现
Flutter 底部导航栏(Tab 页)的快速实现我们知道 Scaffold 实现了基本的 Material 布局.只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Sc ...
【HTML+CSS】页内侧边导航栏页内导航
页内侧边导航栏页内导航源码 HTML部分 CSS部分效果源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
简单记录—vue 用js方法实现侧边导航栏联动选择
侧边导航栏有两个功能要实现: 1.选择任意一条页面滚动到指定目录位置 2.页面内容滚动侧边栏跟随一起滚动页面结构部分,根据数据循环写一个ul > li,生成侧边目录 <ul>< ...
ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
dedeCMS修改文案：页眉rss文字、导航栏“首页”、页脚copyright等
首页rss文案等等(如下图)的信息修改: 所需修改文件: 首先,查找路径:C:\wamp64\www\templets\default\下的文件,如下: footer.htm footer_m.htm ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
你好，SegmentFault 新导航【开发手册】; 再见，侧边导航栏
SegmentFault 在夏季上线了 SegmentFault 5.0 版本,迭代了整个主站的样式,在 8 月的时候上线了面板九宫格(侧边导航栏),整合了部分的入口,方便用户查看笔记.徽章和排行榜等 ...

Vue实现侧边导航栏于Tab页关联

技术栈

效果

分析

Vue实现侧边导航栏于Tab页关联相关推荐

最新文章

热门文章