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>