这里以三级菜单为例,另外,需要注意,我用的是低版本,其中有个地方和最新的官方文档写法不一样。官方文档中把<el-submenu>
写成了<el-sub-menu>
,看到区别了吗?这就是细节,这个细节花费了我20分钟才看出来!
<template>
<el-menu style="width: 200px;height: calc(100vh - 50px)" :default-active="2">
<el-submenu index="1" >
<template #title>系统管理</template>
<el-submenu index="1-4">
<template #title>用户管理</template>
<el-menu-item index="1-4-1">搜索</el-menu-item>
<el-menu-item index="1-4-2">添加</el-menu-item>
<el-menu-item index="1-4-3">删除用户</el-menu-item>
<el-menu-item index="1-4-4">修改用户</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</template>
由此我总结经验:随着版本更新,文档往往会有微调,这些调整可能有以下几种情况:
- 名称变化
- 写法变化
- 增减内容