VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面_vue左侧菜单右侧列表 可以收起

左边菜单动态的展示

首先后端的接口要返回菜单的list集合，是json格式，我使用的是python接口

def getmaenu(request):
    if request.method == 'GET':

        data = {
            "code": 200,
            "msg": '登录成功',
            "data":[{
                "id":101,
                "authNmae":"用户管理",
                "path":"shopmanager",
                "children":[
                    {
                        "id":104,
                        "authNmae": "用户列表",
                        "path": "users",
                        "children":[]
,                    }
                ]

        },
                {
                    "id": 102,
                    "authNmae": "手机管理",
                    "path": "phonemanager",
                    "children": [
                        {
                            "id": 105,
                            "authNmae": "手机列表",
                            "path": "phonelist",
                            "children": []
                            , }
                    ]

                },
                {
                    "id": 103,
                    "authNmae": "小吃管理",
                    "path": "xaiochimanager",
                    "children": [
                        {
                            "id": 106,
                            "authNmae": "小吃列表",
                            "path": "xaiochilist",
                            "children": []
                            , }
                    ]

                },

            ],
            "meta":{
                "msg":"获取列表成功",
                "status":200
            }

        }
        resp = JsonResponse(data)
        return resp


    else:
        return HttpResponse(json.dumps("登录失败", ensure_ascii=False), content_type='application/json')
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

前端调用这个接口的方法是：

前端打印的是

将后端返回的东西放到list集合变量里面，也就是放到

既然list集合变量里面有数据了，我们遍历就可以了

左边菜单的模型是从官网拿过来的

我拿过来的代码是

红框里面的东西都是关于菜单的，里面的代码是

  <!-- 左边菜单 -->
          <el-aside :width="sfzk?'64px':'200px'">
<!-- 收起左边菜单 -->
            <div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" @click="sfzk=!sfzk">|||</div>


            


              <!--  这个里面写这个菜单栏的各种各样的属性
              background-color  这个属性是设置左边菜单的背景色
               text-color    一级菜单的字的颜色
               default-active  菜单的属性有个index属性，这个值就是那个
               前面有冒号   是动态绑定
               router  是否使用 vue-router 的模式，
               启用该模式会在激活导航时以 index 作为 path 进行路由跳转
              -->
                  <el-menu  
                        :default-active= "activePath"
                        class="el-menu-vertical-demo"
                        background-color="rgb(51, 55, 68)"
                        text-color="white"
                        active-text-color="#409EFF"
                        :unique-opened= "true"
                        :router= "true"
                        :collapse= "sfzk"
                        :collapse-transition= "false"
                        
                       >
                        <!-- 一级导航   先遍历第一层数据-->
                        <el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" >
                          <template slot="title">
                            <i :class="objIcon[item.id]"></i>
                            <span>{{item.authNmae}}</span>
                          </template>
                          <!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历
                          属性前面加冒号是动态绑定
                          动态绑定值和等号之间要空一格，这样颜色就会变为黄色
                          -->
                           <el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item2.authNmae}}</span>
                          </el-menu-item>
                       </el-submenu>
                  </el-menu>


            </el-aside>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

左边菜单的属性介绍

都是在这个里面写关于菜单的属性，具体的看官网

遍历菜单

  <!-- 一级导航   先遍历第一层数据-->
                        <el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" >
                          <template slot="title">
                            <i :class="objIcon[item.id]"></i>
                            <span>{{item.authNmae}}</span>
                          </template>
                          <!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历
                          属性前面加冒号是动态绑定
                          动态绑定值和等号之间要空一格，这样颜色就会变为黄色
                          -->
                           <el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item2.authNmae}}</span>
                          </el-menu-item>
                       </el-submenu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上代码解释：

将list集合的变量拿过来进行遍历，将名字取出来放到对应的位置，但是对于子级，也就是遍历第一级里面的子级item.children。也就是要便利这个item.children。

这样左边菜单就出来了

左边菜单折叠效果

如何实现以上的效果。

首先做一个点击的那个区域

在菜单的上面加一个div就可以了

  <div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" 
  @click="sfzk=!sfzk">|||</div>
1
2

color是字体颜色，background是背景颜色，cursor是设置鼠标放上去有小手。
菜单区域进行折叠的原因是菜单有一个属性

这个属性变为true ，那个这个菜单就可以折叠

所以设置属性，，前面加冒号是动态改变这个属性的值，

默认为false，那么什么时候变为true呢？点击上面的区域的时候，可以折叠，那么就需要在上面区域的div上面做一个事件，也就是一个方法。点击的时候变为true

点击让这个属性转换一下就可以了。

这样就可以折叠了，但是动作比较的慢，所以关闭动画，这个菜单有个属性

折叠多么大区域，展开多么大区域？我们可以自己设置
对左边菜单的宽度进行动态的展示

不同的菜单右面展示不同的页面

有个属性

只要设置了，那么就开启了，只是跳转的路径是以每一个菜单的index属性的值作为跳转到 地方。

所以我们可以设置每一个菜单的index的值为当前的值

后端传回来 的每一个菜单都有路径，我们只需要遍历出来放到对应菜单 的index属性里面就可以了。

因为是同一个页面，只是右边的展示的不一样的页面，所以我们需要将不同的页面放到右边，所以我们可以将不同页面的路径设置为当前菜单所在页面的路径的子路径，也就是只要设置

之后在右边写一个占位符

以上就实现了点击不同的菜单，右边展示不同的页面