vue-element-admin-master二级路由三级菜单显示的改进

原项目菜单嵌套对应的路由嵌套

但实际项目中路由只有两级,菜单有三级,

第二级路由的功能要实现分组或子分类的功能,在菜单中实现三级

 

实现思路:

在上一篇中实现从服务器端动态得到路由后src/store/modules/permission.js文件中判断实际vue组件是否存在,如果存在则生成路由,存入到src/store/index.js   getters routers: state => state.permission.routers 中备用

动态获取的路由,带一参数groupName,如果此参数相同,则代表要生成三级菜单 

然后在src/views/layout/Sidebar 生成菜单时,从state.permission.routers中获取路由,判断groupName是否相同,生成新的三级数组,供菜单生成使用

 

二级路由生成三级菜单代码如下:

newmenu: function () {
    //let newmenuarray = []
    //将二级路由 分隔,然后二级中有分组的合并为三级,供菜单 使用
    let newmenuarray = this.$store.getters.store_all_routers;
    newmenuarray.map(function (itemmenu, itemIndex) {
        let menu_temp_child_noGroup = []//无分组
        let menu_temp_child_useGroup = []//有分组
        if (itemmenu.children && itemmenu.children != '') {
            itemmenu.children.map(function (childmenu, childIndex) {
                if (childmenu.groupName == '') {
                    menu_temp_child_noGroup.push(childmenu)
                }

                let tempaaaa = []
                tempaaaa = arrCheck(itemmenu.children)
                if (tempaaaa != "") {
                    //console.log(tempaaaa)
                    menu_temp_child_useGroup = tempaaaa
                }
            })
            itemmenu.children = ""
            itemmenu.children_noGroup = menu_temp_child_noGroup
            itemmenu.children_useGroup = menu_temp_child_useGroup
        }
    })
    return newmenuarray
},

 

//将相同的分组名称的数据 重新编组合并
function arrCheck(arr) {
    //console.log(arr.length)
    var newArr = []
    var temp = ""
    for (var i = 0; i < arr.length; i++) {
        var temp_arr = []
        temp = arr[i].groupName;
        if (temp) {
            for (var j = 0; j < arr.length; j++) {
                if (arr[j].groupName == temp) {
                    temp_arr.push(arr[j])
                    arr[j] = -1;
                }
            }
            if (temp != -1) {
                newArr.push(temp_arr)
            }
        }
    }
    return newArr
}

 

 

菜单组件模板的嵌套删除掉,直接生成三级菜单 

 

<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
    <template>
        <div class="menu-wrapper">
            <template v-for="item in newmenu" v-if="!item.hidden">
                <el-submenu :index="item.name||item.path" :key="item.name">
                    <template slot="title">
                        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
                        <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
                    </template>

                    <!--第二层的连接-->
                    <template v-for="child in item.children_noGroup" v-if="!child.hidden">
                        <router-link :to="{path:item.path+'/'+child.path+'?'+child.querystring}"   :key="child.name" v-if="">
                            <el-menu-item :index="item.path+'/'+child.path">
                                <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
                            </el-menu-item>
                        </router-link>
                    </template>


                    <!--<!--第三层的连接-->
                    <div v-for="child in item.children_useGroup" class="menu-wrapper nest-menu" v-if="!child.hidden">
                        <el-submenu :index="child[0].name||child[0].path" :key="child[0].name">
                            <template slot="title">
                                <span>{{child[0].groupName}}</span>
                            </template>
                            <template v-for="child2 in child" v-if="!child2.hidden">
                               <!-- <router-link :to="{path:item.path+'/'+child2.path,query:{typeid:child2.queryValue}}" :key="child2.name">
                               -->
                                <router-link :to="{path:item.path+'/'+child2.path+'?'+child2.querystring}" :key="child2.name">
                                    <el-menu-item :index="item.path+'/'+child2.path">
                                        <span v-if="child2.meta&&child2.meta.title">{{child2.meta.title}}</span>
                                    </el-menu-item>
                                </router-link>
                            </template>
                        </el-submenu>
                    </div>


                </el-submenu>

            </template>
        </div>
    </template>

</el-menu>