Vue實(shí)現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)的示例代碼
更新時(shí)間：2021年11月14日 11:50:33 作者：商朝
本文主要介紹了Vue實(shí)現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
技術(shù)棧
- 側(cè)邊欄用
- Antdtab使用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">倉(cāng)庫(kù)管理</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: [],//控制一級(jí)菜單折疊展開(kāi)的數(shù)組 存放一級(jí)菜單的value
SelectedKeys: '',//控制二級(jí)菜單高亮 存放二級(jí)菜單value
//側(cè)邊導(dǎo)航菜單數(shù)組
menuItems: [
{
name: '應(yīng)入應(yīng)出報(bào)表',
value: '0',
children: [
{
name: '應(yīng)入庫(kù)單量報(bào)表',
value: '01',
content: () => import('@/views/main/index/qtyReportIndex.vue'),
},
{
name: '應(yīng)入庫(kù)臺(tái)數(shù)報(bào)表',
value: '02',
content: () => import('@/views/main/index/qtyReportIndexQty.vue'),
},
{
name: '應(yīng)出庫(kù)單量報(bào)表',
value: '03',
content: () => import('@/views/main/index/handoverReportIndex.vue'),
},
{
name: '應(yīng)出庫(kù)臺(tái)數(shù)報(bào)表',
value: '04',
content: () => import('@/views/main/index/handoverReportIndexQty.vue'),
},
],
},
{
name: '預(yù)測(cè)',
value: '1',
children: [
{
name: '到貨登記',
value: '11',
content: () => import('@/views/main/index/asnHdrDockIndex.vue'),
},
{
name: '倉(cāng)庫(kù)利用率',
value: '12',
content: () => import('@/views/main/index/whUteIndex.vue'),
},
{
name: '庫(kù)內(nèi)庫(kù)存',
value: '13',
content: () => import('@/views/main/index/imOdsStorageIndex.vue'),
},
],
},
{
name: '指標(biāo)',
value: '2',
children: [
{
name: '單倉(cāng)提貨率',
value: '201',
content: () => import('@/views/main/index/singleWhDeliveryScaleIndex.vue'),
},
{
name: '中轉(zhuǎn)在庫(kù)時(shí)長(zhǎng)',
value: '202',
content: () => import('@/views/main/index/transitDurationInWhIndex.vue'),
},
{
name: '重復(fù)SN',
value: '203',
content: () => import('@/views/main/index/dwExceptionBarcodeIndex.vue'),
},
{
name: '盤點(diǎn)日清單',
value: '204',
content: () => import('@/views/main/index/inventoryRqIndex.vue'),
},
{
name: '移庫(kù)指標(biāo)監(jiān)控',
value: '205',
content: () => import('@/views/main/index/transferIndexIndex.vue'),
},
{
name: '揀貨庫(kù)位分析匯總報(bào)表',
value: '206',
content: () => import('@/views/main/index/pickingByLocSumIndex.vue'),
},
{
name: '裝車報(bào)表匯總',
value: '207',
content: () => import('@/views/main/index/loadingSummaryIndex.vue'),
},
{
name: '出庫(kù)SN報(bào)錯(cuò)率',
value: '208',
content: () => import('@/views/main/index/dwBarcodeErrorRptIndex.vue'),
},
{
name: '揀貨庫(kù)位分析明細(xì)',
value: '209',
content: () => import('@/views/main/index/dwPickFxmxIndex.vue'),
},
{
name: '不按批次揀貨庫(kù)區(qū)維度',
value: '210',
content: () => import('@/views/main/index/notPickingByBatchIndex.vue'),
},
],
},
],
editableTabsValue: '',//tab頁(yè)當(dāng)前active的item
editableTabs: [],//tab頁(yè)數(shù)組
}
},
methods:{
// 用于其他頁(yè)面跳轉(zhuǎn)來(lái)到主頁(yè)并打開(kāi)tab頁(yè)的方法
// 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
}
},
//關(guān)閉tab頁(yè)觸發(fā) 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>
分析
這一套組件不能單憑element一個(gè)單一框架實(shí)現(xiàn)，側(cè)邊導(dǎo)航欄我們需要控制折疊,控制高亮,以及菜單組三個(gè)參數(shù),而element的導(dǎo)航菜單控制折疊展開(kāi)菜單組的參數(shù)是一個(gè)函數(shù)@open控制,所以我們沒(méi)有辦法通過(guò)代碼去控制某個(gè)菜單組的展開(kāi)收起所以跨框架做了這么一個(gè)功能 記錄一下
到此這篇關(guān)于Vue實(shí)現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)的示例代碼的文章就介紹到這了,更多相關(guān)Vue 側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue打包之后配置統(tǒng)一請(qǐng)求地址步驟詳解
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請(qǐng)求地址實(shí)現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ，詳細(xì)的介紹了actions和mutation的使用和區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法
這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請(qǐng)輸入長(zhǎng)度",“請(qǐng)輸入寬度”,"請(qǐng)輸入厚度"等提示字符,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問(wèn)題
這篇文章主要介紹了解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue 2.0+Vue-router構(gòu)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用，文中通過(guò)實(shí)例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來(lái)一起看看吧。2017-03-03
vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
vue+animation動(dòng)畫實(shí)現(xiàn)跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了vue+animation動(dòng)畫實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開(kāi)箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
詳解搭建一個(gè)vue-cli的移動(dòng)端H5開(kāi)發(fā)模板
這篇文章主要介紹了詳解搭建一個(gè)vue-cli的移動(dòng)端H5開(kāi)發(fā)模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01