Vue+ElementUI菜单数据根据列表组织生成树Util方法

最新推荐文章于 2023-12-02 17:33:38 发布

摇摆的方向标

最新推荐文章于 2023-12-02 17:33:38 发布

阅读量500

点赞数 2

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_25125327/article/details/108886572

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这段内容描述了一个用于组织菜单数据的JavaScript Util方法，该方法将扁平化的菜单列表转换为树形结构，便于使用ElementUI进行层级展示。ElementUI部分代码展示了如何在组件中递归渲染多级菜单，通过点击事件处理路由跳转。

摘要由CSDN通过智能技术生成

菜单数据根据列表组织生成树Util方法源码：

//菜单数据组织
export const buildMenu = function (array, ckey) {
    let menuData = [];
    let indexKeys = Array.isArray(array) ? array.map((e) => {return e.id}) : [];
    ckey = ckey || 'parentCode';
    array.forEach(function (e, i) {
        //alert(e[ckey])
        //一级菜单
        if (!e[ckey] || (e[ckey]===e.id)) {
            delete e[ckey];
            menuData.push(deepcopy(e)); //深拷贝
        }else if(Array.isArray(indexKeys)){
            //检测ckey有效性
            let parentIndex = indexKeys.findIndex(function(id){
                return id == e[ckey];
            });
            if(parentIndex===-1){
                menuData.push(e);
            }
        }
    });
    let findChildren = function (parentArr) {
        if (Array.isArray(parentArr) && parentArr.length) {
            parentArr.forEach(function (parentNode) {
                array.forEach(function (node) {
                    if (parentNode.id === node[ckey]) {
                        if (parentNode.children) {
                            parentNode.children.push(node);
                        } else {
                            parentNode.children = [node];
                        }
                    }
                });
                if (parentNode.children) {
                    findChildren(parentNode.children);
                }
            });
        }
    };
    findChildren(menuData);
    return menuData;
}

输入参数列：
在这里插入图片描述

生成结果树：
在这里插入图片描述
ElementUI部分代码：

<el-submenu index="2" v-for="item in allMenuList" :index="item.id">
                    <template slot="title">
                        <i class="iconfont mr5" :class="item.img"></i>{{item.name}}
                    </template>
                    <div v-for="subItem in item.children">
                        <el-menu-item v-if="subItem.children==null" :index="subItem.id" @click.native="openMenu(subItem.route,subItem)">{{subItem.name}}</el-menu-item>

                        <el-submenu v-else :index="subItem.id">
                            <template slot="title">
                                <i class="iconfont mr5" :class="subItem.img"></i>{{subItem.name}}
                            </template>
                            <div v-for="subItemChild in subItem.children">
                                <el-menu-item v-if="subItemChild.children==null" :index="subItemChild.id" @click.native="openMenu(subItemChild.route,subItemChild)">{{subItemChild.name}}</el-menu-item>

                                <el-submenu v-else :index="subItemChild.id">
                                    <template slot="title">
                                        <i class="iconfont mr5" :class="subItemChild.img"></i>{{subItemChild.name}}
                                    </template>

                                    <div v-for="subItemSon in subItemChild.children">
                                        <el-menu-item v-if="subItemSon.children==null" :index="subItemSon.id" @click.native="openMenu(subItemSon.route,subItemSon)">{{subItemSon.name}}</el-menu-item>

                                        <el-submenu v-else :index="subItemSon.id">
                                            <template slot="title">
                                                <i class="iconfont mr5" :class="subItemSon.img"></i>{{subItemSon.name}}
                                            </template>

                                        </el-submenu>
                                    </div>

                                </el-submenu>
                            </div>
                        </el-submenu>
                    </div>
                </el-submenu>