渲染列表
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#fff"
text-color="#000"
active-text-color="#ffd04b"
v-for="(menu, index) in navData"
:key="menu.value">
<el-submenu v-bind:index="index.toString()">
<template slot="title">
<span slot="title">{{menu.title}}</span>
</template>
<el-menu-item-group
v-bind:index="index + '-' + subIndex"
v-if="menu.children"
v-for="(threeMenu, subIndex) in menu.children"
:key="threeMenu.value"
>
<el-menu-item @click='menuClick(threeMenu)' >
<i v-bind:class="threeMenu.icon"></i>
<span slot="title">{{threeMenu.title}}2</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
data数据
// nav添加
navData: [
{
title: "页签操作",
children: [
{
title: "刷新当前",
},
{
title: "关闭当前",
},
{
title: "全部关闭"
},
{
title: "除此之外全部关闭"
}
]
}
],
给数据添加不同的事件
menuClick(menu) {
switch (menu.title) {
case '刷新当前':
console.log('刷新当前');
break;
case '关闭当前':
console.log('关闭当前')
break;
case '全部关闭':
console.log('全部关闭')
break;
case '除此之外全部关闭':
console.log('除此之外全部关闭')
break;
default:
break;
}
},
