引言

作為web前端開發，幾乎所有的web系統介面都會使用到選單欄，而大多數的左側選單欄都是可收縮的。接下來就一起學習下如何根據從後端獲取到的資料，動態的載入選單欄。

GitHub連結

Element-UI

我們可以使用element官網的官方demo作為基礎，因為官網上的demo並不是動態獲取的資料，而是寫死的選單項，且不能做到可收縮。下面將具體介紹如何實現動態載入選單項以及可收縮選單的實現。

資料格式

資料格式不唯一，內部屬性有些是可以不需要的，但是id，parentId，name，actionUrl在這裡是必需的。當然主要還是看個人的需求。

// An highlighted block
var
 
 _list = [
        {
            id: '6',
            name: '個人演算法',
            parentId: '0',
            hasChildren: true,
            parentName: null,
            url: '',
            actionUrl: '',
            visible: '1',
            check: false,
            children: [
                {
                    id:
 
 '1',
                    name: '使用者管理',
                    parentId: '6',
                    hasChildren: false,
                    parentName: "個人演算法",
                    text: "使用者管理",
                    url: "/alm/user/list",
                    actionUrl: '/user/list',
                    children:
 
 []
                },
                {
                    id: '2',
                    name: '策略設定',
                    parentId: '6',
                    hasChildren: false,
                    parentName: "個人演算法",
                    text: "策略設定",
                    url: "/alm/strategy/list",
                    actionUrl: '/strategy/list',
                    children: []
                }
          ]
        },
        {
            id: '8',
            name: '個人方案',
            parentId: '0',
            hasChildren: true,
            parentName: null,
            url: '',
            actionUrl: '',
            visible: '1',
            check: false,
            children: [
                {
                    id: '3',
                    name: '方案管理',
                    parentId: '8',
                    hasChildren: false,
                    parentName: "個人方案",
                    text: "方案管理",
                    url: "/alm/programme/list",
                    actionUrl: '/programme/list',
                    children: []
                },
                {
                    id: '4',
                    name: '資料統計',
                    parentId: '8',
                    hasChildren: false,
                    parentName: "個人方案",
                    text: "資料統計",
                    url: "/alm/datas/list",
                    actionUrl: '/datas/list',
                    children: []
                }
            ]
        }
    ]

傳參到選單欄元件中

用上述的_list賦值給menus，傳參到選單欄元件中。資料同樣可以從後臺獲取到，直接賦值給你要傳的引數即可。選單欄元件內接受到後，即可使用該資料。

	<!--側邊欄-->
    <left-menu :top-title="title" :menus="menus" ></left-menu>

el-menu的主要寫法

在實現過程中，該demo只測試過一級到二級的選單，尚未測試過三級以上的。如果有以上的需求，只要理清實現的原理，相信也是可以擼出來的。 如果對el-menu中的el-submenu以及el-menu-item有不太理解的地方，可以先去看看官網的基礎demo。 連結：element官網menu

<el-menu
                class="el-menu-vertical-demo"
                :unique-opened="true"
                :router="true"
                @open="handleOpen"
                @close="handleClose"
                background-color="#324157"
                text-color="#fff"
                active-text-color="#2bb8ed"
                :default-active="defaultActive"
                :collapse="this.$store.state.isCollapse">
            <el-menu-item index="8">
                <i class="el-icon-phone-outline"></i>
                <span>{{topTitle}}</span>
            </el-menu-item>
            <template v-for="item in menus" :index="item.id">
                <template v-if="item.hasChildren" >
                    <el-submenu  :index="item.id">
                        <template slot="title" >
                            <i class="el-icon-menu"></i>
                            <span class="title-instance-left">{{item.name}}</span>
                        </template>
                        <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.actionUrl" @click="openUrl(subItem.actionUrl)">
                            <span class="title-instance-left">{{ subItem.name }}</span>
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.actionUrl" @click="openUrl(item.actionUrl)">
                        <label>{{ item.name }}</label>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>

如何實現可收縮

通常我們是通過點選按鈕來觸發事件，達到收縮選單欄的效果。這裡的問題主要集中於，左側選單欄的展開與收縮，以及右側實際內容區域的跟隨變化。即，當左側收縮時，右側內容區域會向左跟進；左側展開時，右側內容區域會向右搜尋。

而demo中針對這一問題，主要是運用transition這個屬性來實現的。所以，就需要使用到變數來動態的切換class類，達到不同的樣式效果。

引用右側內容元件中的動態class

根據變數isLeftOpen來進行控制右側內容區域的收縮的。

	<!--右側路由部分-->
    <div :class="['inner-layout__right-part', {'inner-layout__right-part_open': !isLeftOpen},{'inner-layout__right-part_close': isLeftOpen}]">
         <router-view ></router-view>
    </div>

el-menu的收縮

el-menu的收縮主要是根據el-menu中的collapse屬性來控制的

//動態繫結collapse，isCollapse是寫在全域性中的
:collapse="this.$store.state.isCollapse"

通過點選按鈕實現更改變數值，達到可收縮效果

點選收縮按鈕，觸發事件，更改對應的變數，實現可收縮效果。

	transformMenu(){
         if(this.$store.state.isCollapse === true){
            	this.$store.commit('SET_IS_COLLAPSE', false);
                this.isLeftOpen = true;
         }else{
                this.$store.commit('SET_IS_COLLAPSE', true);
                this.isLeftOpen = false;
         }
     },

對於this.$store.commit的寫法有不理解的地方，建議可以去看下vuex

結束語

以上內容主要就是本次對動態載入可收縮選單欄的講解，如有不明之處可評論，github中會持續更新在專案中遇到的一些問題，謝謝！