element ui左侧菜单栏从后台获取数据_侧边栏后台获取内容

前言

菜单栏数据实现从后台获取

实现

代码

<el-menu background-color="#393e46" text-color="#fff">
  <el-menu-item :class="getMenuSwitchState?'close':'open'">
    <i class="el-icon-position" style="color:#409eff"></i>
    <span slot="title" v-if="!getMenuSwitchState">LOGO</span>
  </el-menu-item>
</el-menu>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
  background-color="#393e46" text-color="#fff" active-text-color="#ffd04b" :collapse="getMenuSwitchState">
  <!--单级菜单-->
  <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
    <i :class="'el-icon-' + item.icon"></i>
    <span slot="title">{{item.label}}</span>
  </el-menu-item>
  <!--多级菜单-->
  <el-submenu index="index" v-for="(item,index) in hasChildren" :key="index">
    <template slot="title">
      <i class="el-icon-menu"></i>
      <span>{{item.label}}</span> </template>
    <el-menu-item-group>
      <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
        {{subItem.label}}
      </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

数据

asideMenu: [{
   path: '/', //地址
    label: '首页', // 菜单标识
    icon: 's-home', //图标选取的是element图表，然后拼接到上面
  },
  {
    path: "/video",
    label: '视频管理',
    icon: 'video-play'
  },
  {
    path: "/user",
    label: '用户管理',
    icon: 'user'
  },
  //二级菜单
  {
    label: '多级菜单',
    icon: 'user',
    children: [{
        path: "/page1",
        label: '页面1',
        icon: 'setting'
      },
      {
        path: "/page2",
        label: '页面1',
        icon: 'user'
      },
    ]
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

方法

noChildren() {
  return this.asideMenu.filter(item =>
    !item.children
  )
},
hasChildren() {
  return this.asideMenu.filter(item =>
    item.children
  )
}
1
2
3
4
5
6
7
8
9
10

效果