Element-UI 写后台【一】 左侧导航

左侧导航菜单使用 element-ui的导航菜单

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

 <--多级菜单-->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
   
 <--单级菜单-->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>

    </el-menu>

例子的数组：

asideMenu: [
                    {
                        path: '/', //地址
                        label: '首页', // 菜单标识
                        icon: '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'
                            },
                        ]
                    },
                ]

将数组循环到导航菜单上面， 因为里面有二级菜单，而且是独立的部分 ，使用v-for不是很好，这里使用 计算属性判断是否含有children。

computed: {
    noChildren() {
        return this.asideMenu.filter(item =>
            !item.children
        )
    },

    hasChildren() {
        return this.asideMenu.filter(item =>
            item.children
        )
    }
},

<!--        单级菜单-->
<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>