vue项目--后台管理系统（day7）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

上一篇文章我们完成了下拉菜单的表内内容，接下里我们将完成“其他”下拉后的两个子菜单以及一些功能的script代码。

1. 首先，我们使用了一个slot插槽，用来防止title标题，具体的代码如下所示：

<template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>

这里的图标以及标签都是之前在data中定义好的，是每一个菜单内容的名字以及图标，这样可以当我们点击首页的时候，菜单折起来的时候左边的侧边栏只显示图标内容，而文字部分全部隐藏并且“通用后台管理系统”显示为“后台”。

2. 然后就是“其他”里面的两个小部分，具体的代码如下所示：

<el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
        <el-menu-item @click="clickMenu(subItem)" :index="subIndex">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>

里面v-for循环的数据也是在data里面定义的，并且绑定了一个clickMenu事件，用来展示下拉内容，具体的展示样式如下图所示：

3. 这个“其他”部分，下拉出来的子内容还要通过conputed计算属性来进行判定，hasChildren或者noChildren,两个不同的部分会有不同的效果，具体的判断代码如下图所示：

然后上面绑定的cilckMenu点击菜单事件就是点击相应的标题让页面跳转到相应的内容里面去，这就是一个简单的页面跳转功能。我们通过this.$router.push({name:item.name}) this.$store.commit('selectMenu',item)即可实现对应的页面跳转效果，这都是基于我们在data中定义数据的时候添加了path路径。