<template>
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
style="width:12vw"
text-color="#fff"
active-text-color="#ffd04b">
<h3>通用后台管理系统</h3>
<el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMen(item)">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<el-submenu :index="v.path" v-for="v in hasChildren" :key="v.path">
<template slot="title">
<i :class="'el-icon-'+v.icon"></i>
<span>{{v.label}}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="sub.path" v-for="sub in v.children" :key="sub.path" @click="clickMen">
<i :class="'el-icon-'+sub.icon"></i>
<span>{{sub.label}}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
navList: [
{
path: "/threefloor",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/fixfloor",
name: "home",
label: "列表",
icon: "s-home",
url: "Home/Home",
children: [
{
path: "/onefloor",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/servefloor",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
],
},
{
path: "/fourfloor",
name: "home",
label: "数据",
icon: "s-home",
url: "Home/Home",
},
{
path: "/test",
name: "home",
label: "用户",
icon: "s-home",
url: "Home/Home",
children: [
{
path: "/onefloor",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/servefloor",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
],
},
{
path: "/nurse",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
],
};
},
computed:{
noChildren(){
return this.navList.filter((item)=>!item.children)
},
hasChildren(){
return this.navList.filter((item) =>item.children)
},
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
clickMen(item){
this.$router.push({path:item.path})
}
},
};
</script>
1、data里面把自己要的数据构造好,
2、comput 中判断有没有children
3、用v-for进行遍历
如果你的才华还实现不了你的野心,那就静下心来,埋头苦干。有志者事竟成破釜成舟百二秦关终属楚,苦心人天不负卧薪尝胆三千越甲可吞吴!