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

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

上一篇文章中我们完成了头部的Header.vue组件，接下来我们要完成左边的Aside组件，主体部分是一个菜单。

1. 首先，我们先找到Element-ui里面的NavMenu菜单导航组件，具体的链接如：element.eleme.cn/#/zh-CN/com… ，然后我们要实现的效果如下图所示：

这里的“其他”可以下拉。下拉出来的内容是两个导航内容，然后点击Header.vue组件里的首页图标按钮，左边的Asider组件会折叠起来，只显示图标，这里就使用的通用后台管理系统就使用到了三元表达式，如：

{{isCollapse ? '后台' : '通用后台管理系统'}}

然后需要在data中定义一个isCollapse数据。

2. 然后我们的Menu菜单需要绑定一些属性，如下所示：

<el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >  

这里我们需要水平折叠起菜单，所以mode设置为vertical, 这里面的collapse就是表示为是否水平折叠收起菜单（仅在mode为vertical时可使用），然后我们将其设置为isCollapse，动态绑定一下。并且在这个菜单里面绑定了open和close两个事件，用来关闭或者打开菜单。

3. 然后就是菜单内每一项的内容，这里我在data中定义了数据，也就是这些内容的名字，然后我们使用el-menu-item来通过v-for循环渲染这个数组将数据渲染到页面上去，具体的代码如下所示：

<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>