她早已目视前方从来都不回头看,加快了步伐从不在乎年华已过半,坚定的眼神 过去的遗憾
话不多说,菜单栏权限( 根据后端返回的数据进行渲染 )
后台返回的数据结构( 未处理 根据parentId 分离出父子级菜单 有null为父级 没有为子级)
[
{
"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"
}
]
侧边导航栏数据结构( 处理后的结构 childrenMenuLis如果为空说明就是个一级菜单,如果有值说明有二级):
[
{
childrenMenuLis:[]
component: "components/instrument/index.vue"
id: "303"
name: "操作盘"
parentId: null
switchState: true
url: "/instrument"
urlMethod: null
}
]
处理返回的菜单数据数据:
data中: // 接收数据 menuListVal: [],//接收所有菜单数据 parentVal: [],//父级菜单数据 childBtnVal: [],//子级菜单数据 parentChildMap: [], 事件中: menuList() { this.$ajax.get("/menu/list").then(res => { this.menuListVal = res.data.data;//接收返回的菜单数据 this.menuListVal.filter(item => {// 根据parentId 分离出父子级菜单 有null为父级(一级) 没有为子级(二级) if (item.parentId == null) {//父级 this.parentVal.push(item); } else if (item.parentId != null) {//子级 this.childBtnVal.push(item); } }); this.parentVal.filter(items => {//过滤一级菜单,添加属性 items.switchState = true;//控制权限显示隐藏 // 定义一个空数组根据条件 把子级插进去 items.childrenMenuLis = [];//存放二级菜单 this.childBtnVal.filter(itemChild => { // 根据条件将所有子级插入 if (items.id == itemChild.parentId) {//如果一级菜单中的id === 二级中的父级id 将二级菜单存放的父级定义的数组里 items.childrenMenuLis.push(itemChild); } }); }); this.parentChildMap = this.parentVal;//可以循环遍历数据了 // console.log(this.parentChildMap); }); } created() { this.menuList(); }
处理图标:( 根据name进行对应显示 )
[
{
childrenMenuLis: Array(0)
component: "components/instrument/index.vue"
iconClassName: "el-icon-pie-chart"
id: "303"
index: 1
name: "仪表盘"
parentId: null
switchState: true
url: "/instrument"
urlMethod: null
}
]
(
把两个数组里的多个对象一一对应合并
合并数组或者对象在数组或对象前面加 "...",是es6的新写法,然后数组的map方法会返回数组
)
data中:
//定义的图标样式 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%; 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>