She had straight ahead never look back, do not care to accelerate the pace from Love has more than half, determined look past regrets
Man of few words said, the menu bar privileges (rendering the data returned by the backend)
Background returned data structure (untreated according to the parent-child menu parentId separated there is no null parented children )
[
{
"id": 352,
"parentId": 347,
"name": "出场记录",
"url": "/grouplessonschedule/list",
"urlMethod": "POST",
"component": "components/syllabusLeagueClass/index.vue"
},
{
"id": 392,
"parentId": null,
"name": "出场资格",
"url": null,
"urlMethod": null,
"component": "components/feedback/index.vue"
}
]
Side navigation data structure (structure childrenMenuLis processed is empty if a menu is a description, if there is specification has two):
[
{
childrenMenuLis:[]
component: "components/instrument/index.vue"
id: "303"
name: "operating panel "
parentId: null
switchState: true
url: "/instrument"
urlMethod: null
}
]
Processing the data returned by the menu:
in data: // receiving data menuListVal: [], // all menu data received parentVal: [], // parent menu data childBtnVal: [], // child menu data parentChildMap: [], Event: menuList() { the this $ Ajax.. GET ( " / MENU / List " ) .then (RES => { the this .menuListVal = res.data.data; menu data received // return the this .menuListVal.filter (Item => { // The parentId separated null parent-child menu has a parent (a) is not sub-stage (two) IF ( item.parentId == null ) { // parent the this .parentVal.push (Item); } the else IF ( ! item.parentId = null ) { // child of the this .childBtnVal.push (Item); } }); the this .parentVal.filter (items => { // a filter menu, add attributes items.switchState = to true ; // show hidden control authority // define an empty condition in accordance with the sub-array stage insert items.childrenMenuLis = [ ]; // store two menu the this .childBtnVal.filter (itemChild => { // the conditions for all the children inserted IF ( items.id == itemChild.parentId ) { // If a menu id == the two parent = id secondary menu stored in the array defined in the parent items.childrenMenuLis.push (itemChild); } }); }); the this .parentChildMap = the this .parentVal ; // data can loop through the // console.log (this.parentChildMap); }); } created() { this.menuList(); }
Icon display processing in accordance with the correspondence :( name)
[
{
childrenMenuLis: Array(0)
component: "components/instrument/index.vue"
iconClassName: "el-icon-pie-chart"
id: "303"
index: 1
name: "Dashboard "
parentId: null
switchState: true
url: "/instrument"
urlMethod: null
}
]
(
The two arrays of multiple objects in one-merge
Merge an array or an object in front of an array or object plus "...", the new wording of es6, map method returns an array then array
)
data in:
Icons // define the style classIcon: [ { index: 1, iconClassName: "el-icon-pie-chart" }, { index: 2, iconClassName: "el-icon-takeaway-box" }, { index: 3, iconClassName: "el-icon-monitor" }, { index: 4, iconClassName: "el-icon-collection" }, { index: 5, iconClassName: "el-icon-time" }, { index: 6, iconClassName: "el-icon-present" }, { index: 7, iconClassName: "el-icon-s-data" }, { index: 8, iconClassName: "el-icon-document-copy" }, { index: 9, iconClassName: "el-icon-key" }, { index: 10, iconClassName: "el-icon-sell" }, { index: 11, iconClassName: "el-icon-set-up" }, { index: 12, iconClassName: "el-icon-unlock" } ], iconIcon: [] 事件中： menuList() { // 将this.parentChildMap里的值与this.classIcon数组里的值合并，通过用户名显示对应图标,并返回新数组 this.iconIcon = this.parentChildMap.map((item, index) => { return { ...item, ...this.classIcon[index] };
//此时iconIcon里面就有name和图标class了可以循环遍历了 }); }
遍历数据渲染
<el-container>
<!-- 侧边导航区 -->
<el-aside width="244px" padding-top="10px" :style="asideStyle">
<el-row class="tac" width="244px" style="user-select:none;height:100%">
<el-col :span="12" style="user-select:none;height:100%; width: 101%">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#13141f"
text-color="#fff"
active-text-color="#fff"
router
style="height:100%"
>
<!-- 第一次循环 父级菜单栏显示-->
<div v-for="(item, index) in parentChildMap" :key="index">
<!-- 如果item.childrenMenuLis.length大于0说明有子级,先显示父级在触发子级 item.switchState控制导航栏显示隐藏-->
<el-submenu
:index="item.id"
v-show="item.switchState"
v-if="item.childrenMenuLis.length > 0"
style="text-align: left;padding-left: 24px;"
>
<!-- 循环父级菜单的图标 item.name == icon.name如果名称相同就显示对应图标-->
<template slot="title">
<i
v-for="(icon, index) in iconIcon"
:key="index"
:class="item.name == icon.name ? icon.iconClassName : ''"
></i>
<span>{{ item.name }}</span> 将父级名称显示出来在来触发子级
</template>
<!-- 循环出子级菜单数据 -->
<el-menu-item-group
v-for="(itemChild, indexChild) in item.childrenMenuLis"
:key="indexChild"
>
<el-menu-item :index="itemChild.url">{{
itemChild.name
}}</el-menu-item> 跳转的路由与子级名称
</el-menu-item-group>
</el-submenu>
<!-- 如果item.childrenMenuLis.length等于0,说明只有一级直接显示 -->
<el-menu-item
v-if="item.childrenMenuLis.length === 0"
:index="item.url"
style="text-align: left;padding-left: 44px;"
>
<!-- 循环出只有一级的图标 item.name == icon.name如果名称相同就显示对应图标-->
<span v-for="(icon1, index1) in iconIcon" :key="index1">
<i
:key="index1"
:class="
item.name == icon1.name ? icon1.iconClassName : ''
"
></i> </span
>{{ item.name }}导航名</el-menu-item
>
</div>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>