效果
数据格式：
子菜单（el-submenu）
Object.keys[menus[key]] : 只有一个数据时跟原来menu[0]一样的键
v-if = “item === menus[ Object.keys[menus[key]] ]
:index = "linkArr[key]" 存储的是路径，key为键，作为路径进行跳转
menus数据格式如下：
menus[0]储存的是1: "用户数据"2: "练习数据"
menus[1~其他]储存的是对应的展开项包括只有一个的不展开
Object.keys(menus[key])获取的是对象的展开项是一个数组，Object.keys(menus[1]) 即[11]
//大致的结构就是，没有展开项就没有显示本身,有展开项就有el-submenu
<template>
<el-menu class="sidebar" :router="true" text-color="#b7bbbf"
// 默认激活的页面
active-text-color="white" :default-active='defaultActive'>
//遍历显示在navBar项，
//key键值1,2,3,4，item值，index索引 0 12
<div v-for="(item,key,index) in menus[0]" :key='key' :data-item="item" :data-key="key" :data-index="index">
//[Object.keys(menus[key])[0]]对象变成数组取第一个的键
// 以用户数据为例menus[1][[11]]即menu[1].'11' 为'用户数据'
//相等说明没有展开项 '用户数据' === '用户数据'只有一项
<div v-if='item==menus[key][Object.keys(menus[key])[0]]'>
<el-menu-item :index="linksArr[key]"><i class="sidebarIcon" :class='iconClassName[index]'></i>{{item}}</el-menu-item>
</div>
///有展开项
<div v-else>
<el-submenu :data-index="index" :index="linksArr[index]" >
<template slot="title"><i class="sidebarIcon" :class='iconClassName[index]'></i>{{item}}</template>
<el-menu-item v-for='(subItem,subKey,subIdx) in menus[key]' :key='subKey' :route="linksArr[subKey]" :index='linksArr[subKey]'>{{subItem}}</el-menu-item>
</el-submenu>
</div>
</div>
</el-menu>
</template>
<script>
export default {
name: "menus",
data() {
return {
menus: [],
iconClassName: [
"data-user",
"work-data"
],//用于显示激活图标
linksArr: {}
};
},
computed: {
defaultActive: function() {
return this.$route.path;
}
},
methods: {},
mounted() {
let that = this;
this.$store.dispatch("getUserCenter").then(res => {
let permissions = res.data.data.permissions;
this.menus = permissions;
this.$emit("userInfo", {
name: res.data.data.name,
phone: res.data.data.phone
});
for (var i = 0; i < this.menus.length; i++) {
for (var j in this.menus[i]) {
var text = this.menus[i][j];
switch (text) {
case "用户数据":
this.$set(this.linksArr, j, "/resend/userData");
continue;
case "练习数据":
this.$set(this.linksArr, j, "/resend/home");
continue;
default:
break;
}
}
}
console.log(that.linksArr);
});
}
};
</script>
