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)效果
這里以學生成績管理系統(tǒng)為例，整體布局以及實現(xiàn)效果如下所示：
二、整體布局
整體布局采用elementui 中Container 布局容器組件實現(xiàn)，如下所示。
整個頁面布局頁面為main.vue，其中左側(cè)菜單欄部分被封裝為一個組件（ MenuTree），菜單部分使用elementui 中Menu 菜單組件來實現(xiàn)，其中el-menu當中參數(shù)unique-opened為只允許一個展開，參數(shù)default-active為默認激活菜單的 index，參數(shù)router為在激活導航時以 index 作為 path 進行路由跳轉(zhuǎn)，具體代碼如下：
<template>
<!-- 系統(tǒng)整體頁面布局 -->
<el-container class="el-container">
<!-- 頁面頭部區(qū)域 高度默認60px -->
<el-header class="el-header">
<!-- 應(yīng)用名稱 -->
<span>學生成績管理系統(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:'學生管理',
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中導入，動態(tài)菜單數(shù)據(jù) menuList（json數(shù)組格式）從父組件main.vue傳遞到該頁面，再循環(huán)遞歸實現(xiàn)。注意數(shù)據(jù)中parentid為0的數(shù)據(jù)表示為根路徑，即最外層，icon為圖標，也是使用elementui當中的圖標組件，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:'學生管理',
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:'學生管理',
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)文章
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue項目如何修改title旁邊的icon圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了查看vue版本號以及vue/cli腳手架版本號方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學習下。2020-02-02
這篇文章主要介紹了Vue進階構(gòu)造屬性，從4個方面來進行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來看一下2021-05-05
VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁面同時更新的實現(xiàn)方法
這篇文章主要介紹了VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁面同時更新的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue.js中created方法是一個生命周期鉤子函數(shù)，一般可以在created函數(shù)中調(diào)用ajax獲取頁面初始化所需的數(shù)據(jù)，這篇文章主要介紹了Vue中created和mounted使用場景分析,需要的朋友可以參考下2023-05-05
完美解決vue 項目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02