vue,element 制作后台管理系统菜单,二级菜单鼠标悬停侧边展示
因为:element的导航菜单下拉都是向下的,这时候别人要是有二级菜单和三级菜单,而且很多的话,就很不方便。
所以:打算把二级菜单之后的三级菜单做出侧边弹出
这时候找了一遍导航栏的组件,发现并不能通过设置属性直接获得这个功能。但是这时候发现导航菜单还是有这个功能的,但是是需要在collapse属性为fasle的时候,当在这个时候导航菜单会折叠起来。
但是只要设置好宽,实际上还是可以使用的。所以就打算用它了,给二级菜单在嵌套一层。
下面是代码
index.vue
<template>
<div>
<el-aside width="200px">
<el-menu >
<navigation-item v-for="(menu,i) in List" :key="i" :item="menu"/>
</el-menu>
</el-aside>
</div>
</template>
<script>
import navigationItem from './Button.vue'
export default {
name:'navigation',
components: {
navigationItem },
data() {
return{
List: [
{
"id": 1,
"path": "/admin ",
"name": "Content",
"nameZh": "物理机能耗预测",
"iconCls": "el-icon-tickets",
"component": "AdminIndex",
"parentId": 0,
"children": [{
"id": 9,
"path": "/admin/content/department",
"name": "Department",
"nameZh": "Host1",
"iconCls": null,
"component": "content/department",
"parentId": 3,
"children": null
},
{
"id": 10,
"path": "/admin/content/student",
"name": "Student",
"nameZh": "Host2",
"iconCls": null,