element?ui動態(tài)側(cè)邊菜單欄及頁面布局實現(xiàn)方法
更新時間：2023年09月17日 10:11:49 作者：薇森
后臺管理系統(tǒng)經(jīng)常會使用到一個左側(cè)菜單欄,右側(cè)Tab頁的頁面顯示結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于element?ui動態(tài)側(cè)邊菜單欄及頁面布局實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
一、實現(xiàn)效果
這里以學(xué)生成績管理系統(tǒng)為例，整體布局以及實現(xiàn)效果如下所示：
二、整體布局
整體布局采用elementui 中Container 布局容器組件實現(xiàn)，如下所示。
整個頁面布局頁面為main.vue，其中左側(cè)菜單欄部分被封裝為一個組件（ MenuTree），菜單部分使用elementui 中Menu 菜單組件來實現(xiàn)，其中el-menu當(dāng)中參數(shù)unique-opened為只允許一個展開，參數(shù)default-active為默認激活菜單的 index，參數(shù)router為在激活導(dǎo)航時以 index 作為 path 進行路由跳轉(zhuǎn)，具體代碼如下：
<template>
<!-- 系統(tǒng)整體頁面布局 -->
<el-container class="el-container">
<!-- 頁面頭部區(qū)域 高度默認60px -->
<el-header class="el-header">
<!-- 應(yīng)用名稱 -->
<span>學(xué)生成績管理系統(tǒng)</span>
</el-header>
<el-container>
<!-- 左側(cè)菜單欄部分 -->
<el-aside class="el-aside">
<el-scrollbar>
<el-menu class="el-menu"
background-color="#32323a"
:unique-opened="true"
:default-active="$route.path"
text-color="#ffffff"
router>
<MenuTree :menuList="menuList"></MenuTree>
</el-menu>
</el-scrollbar>
</el-aside>
<!-- 右側(cè)主題頁面內(nèi)容展示 -->
<el-main class="el-mian">
<!-- 路由頁面 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import MenuTree from '@/components/menu/menustree.vue';
export default {
components: {
MenuTree
},
data() {
return {
menuList:[
{
id:1,
parentid:'0',
name:'系統(tǒng)主頁',
icon:'HomeFilled',
url:'/homepage',
},
{
id:2,
parentid:'0',
name:'學(xué)生管理',
icon:'UserFilled',
children:[
{
id:3,
parentid:'2',
name:'信息管理',
icon:'',
children:[
{
id:4,
parentid:'2',
name:'密碼修改',
icon:'',
url:'/password'
}
]
},
{
id:5,
parentid:'2',
name:'成績管理',
icon:'',
url:'/grade',
}
]
},
{
id:6,
parentid:'0',
name:'課程管理',
icon:'List',
url:'/course',
}
],
}
},
}
</script>
<style>
/*鋪滿屏幕，沒有邊距*/
.el-container {
padding: 0px;
margin: 0px;
height: 100wh;
}
.el-header {
/* 頂部部分的高度(默認60px) */
background-color: #0077d5;
color: #FFFFFF;
font-size: 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.el-aside {
width: 200px;
background-color: #32323a;
min-height: calc(100vh - 60px);
}
.el-menu {
width: 200px;
min-height:100%;
}
.el-menu span {
margin-left: 10px;
}
.el-mian {
background-color: #eaedf1;
padding: 0px;
margin: 0px;
height:calc(100vh - 60px);
}
</style>三、菜單欄組件
組件為menustree.vue，在上面的布局main.vue中導(dǎo)入，動態(tài)菜單數(shù)據(jù) menuList（json數(shù)組格式）從父組件main.vue傳遞到該頁面，再循環(huán)遞歸實現(xiàn)。注意數(shù)據(jù)中parentid為0的數(shù)據(jù)表示為根路徑，即最外層，icon為圖標(biāo)，也是使用elementui當(dāng)中的圖標(biāo)組件，url為跳轉(zhuǎn)路由。具體代碼如下所示：
<template>
<div>
<template v-for="(item) in menuList">
<!-- 有次級菜單的,則展開子選項-->
<el-sub-menu v-if="item.children && item.children.length>0" :key="item.id" :index="item.id">
<template #title>
<el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon>
<span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
</template>
<!-- 遞歸,實現(xiàn)無限級展開 -->
<MenuTree :menuList="item.children"></MenuTree>
</el-sub-menu>
<!-- 沒有次級菜單的 -->
<el-menu-item v-if="!item.children" :key="item.id" :index="item.url">
<el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon>
<span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
import {
HomeFilled,
UserFilled,
List
} from "@element-plus/icons";
export default {
props:{
menuList:{
type:Array,
default(){
return []
}
}
},
name: 'MenuTree',
components: {
HomeFilled,
UserFilled,
List
},
methods: {
}
}
</script>
<style scoped>
.activespan{
font-size: 15px !important;
}
.disactivesapn{
margin-left: 20px;
font-size: 15px !important;
}
/* 菜單欄選中后背景色 */
.el-menu-item {
color: #ffffff;
}
.el-menu-item.is-active {
color: #55aaff;
}
</style>四、路由部分
這是使用嵌套路由，將菜單欄各個頁面嵌套在main頁面右側(cè)展示，重定向是為了讓初始右側(cè)頁面顯示系統(tǒng)主頁，具體配置如下所示：
const routes = [
// 整體布局頁面
{
path: '/main',
name: 'main',
component: () => import("@/views/main"),
// 重定向，自動跳轉(zhuǎn)到指定路由
redirect: "/homepage",
//嵌套路由
children: [
{
path: '/homepage',
name: '系統(tǒng)主頁',
component: () => import("@/views/homepage"),
},
{
path: '/grade',
name: '成績管理',
component: () => import("@/views/grade"),
},
{
path: '/information',
name: '信息管理',
component: () => import("@/views/information"),
},
{
path: '/password',
name: '密碼修改',
component: () => import("@/views/password"),
},
{
path: '/course',
name: '課程管理',
component: () => import("@/views/course"),
}
]
},
]五、數(shù)據(jù)格式
菜單欄數(shù)據(jù) menuList為嵌套的json數(shù)據(jù)格式，在實際開發(fā)中， menuList需要從后端構(gòu)造成嵌套json數(shù)組的格式，傳遞到前端來進行動態(tài)數(shù)據(jù)展示，格式如下：
menuList:[
{
id:1,
parentid:'0',
name:'系統(tǒng)主頁',
icon:'HomeFilled',
url:'/homepage',
},
{
id:2,
parentid:'0',
name:'學(xué)生管理',
icon:'UserFilled',
children:[
{
id:3,
parentid:'2',
name:'信息管理',
icon:'',
children:[
{
id:4,
parentid:'2',
name:'密碼修改',
icon:'',
url:'/password'
}
]
},
{
id:5,
parentid:'2',
name:'成績管理',
icon:'',
url:'/grade',
}
]
},
{
id:6,
parentid:'0',
name:'課程管理',
icon:'List',
url:'/course',
}
],此外，后端也可以傳遞過來，如下格式的json數(shù)組：
menuList = [
{
id:1,
parentid:'0',
name:'系統(tǒng)主頁',
icon:'HomeFilled',
url:'/homepage',
},
{
id:2,
parentid:'0',
name:'學(xué)生管理',
icon:'UserFilled',
url:'',
},
{
id:3,
parentid:'2',
name:'信息管理',
icon:'',
url:'',
}
];但是此時需要在前端對其進行構(gòu)造，變成上面的嵌套的形式才能供菜單欄組件使用，調(diào)用以下方法可將上面的數(shù)據(jù)變?yōu)閖son嵌套數(shù)組，（注意，id,name等可以自己命名，對應(yīng)修改即可）構(gòu)造的js方法如下：
/**
* @FileDescription: 后臺獲取的菜單列表數(shù)據(jù)轉(zhuǎn)為無限分類遞歸樹，嵌套JSON數(shù)據(jù)格式
*/
totree(data) {
let map = {};
let val = [];
//生成數(shù)據(jù)對象集合
data.forEach(it => {
map[it.id] = it;
})
//生成結(jié)果集
data.forEach(it => {
const parent = map[it.parentid];
if (parent) {
if (!Array.isArray(parent.children)) parent.children = [];
parent.children.push(it);
} else {
val.push(it);
}
})
return val;
},總結(jié)
到此這篇關(guān)于element ui動態(tài)側(cè)邊菜單欄及頁面布局實現(xiàn)的文章就介紹到這了,更多相關(guān)element ui動態(tài)側(cè)邊菜單欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本篇文章給大家總結(jié)了vue組件基礎(chǔ)的相關(guān)知識點以及代碼實例，有需要的朋友可以學(xué)習(xí)參考下。2018-05-05
vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細教程(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關(guān)于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2022-04-04
在Vue中延遲執(zhí)行某個函數(shù)的實現(xiàn)方式
在Vue中延遲執(zhí)行某個函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過一些示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
在現(xiàn)代前端開發(fā)中,Vue.js以其高效的響應(yīng)式數(shù)據(jù)綁定和視圖更新機制著稱,而這一切的核心技術(shù)之一就是虛擬DOM和Diff算法,本文將詳細介紹虛擬DOM的概念、Diff算法的工作原理,以及Vue如何利用這些技術(shù)高效地更新UI,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了validator自定義驗證及易錯點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要介紹了vue如何判斷數(shù)組中的對象是否包含某個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11