Vue:Elemenu-Plus递归型菜单组件封装

        前端开发中，经常遇到需要与后端配置，前端动态渲染菜单的应用场景，而究其本质，就是菜单组件的应用，只是在不确定菜单级数的情况下，我们需要对组件做一个递归处理，让它能够适应大多数应用场景。

递归型菜单举例

         如上图所示，以Element-Plus组件库为例，对于一个递归型菜单，我们该如何进行封装呢？先假设后端接口返回的简单菜单信息如下，

[
            {
                index: "1",
                path: "/index",
                routeParams: {},
                meta: {
                    title: "首页",
                    icon: "House",
                }
            },
            {
                index: "2",
                path: "/funcs",
                routeParams: {},
                meta: {
                    title: "功能中心",
                    icon: "Menu",
                }
            },
            {
                index: "3",
                path: "/cases",
                routeParams: {},
                meta: {
                    title: "项目案例",
                    icon: "Grid",
                    mode:"vertical",
                },
                children: [
                    {
                        index: "3-1",
                        path: "",
                        routeParams: {},
                        meta: {
                            title: "item one",
                            icon: "Orange",
                        },
                        children:[
                            {
                                index: "3-1-1",
                                path: "",
                                routeParams: {},
                                meta: {
                                    title: "item one-one",
                                    icon: "Orange",
                                },
                            }
                        ]
                    },
                    {
                        index: "3-2",
                        path: "",
                        routeParams: {},
                        meta: {
                            title: "item two",
                            icon: "Orange",
                        }
                    },
                    {
                        index: "3-3",
                        path: "",
                        routeParams: {},
                        meta: {
                            title: "item three",
                            icon: "Orange",
                        }
                    }
                ]
            }
        ]

        实际开发中，还可能包括组件路径、菜单项显隐等相关字段信息，此处暂不考虑，我们当前的核心需求是：如何去完成这样的一个菜单组件的封装。

        对于上图所示的效果，我在此处所做的组件封装示例代码如下，

        使用示例如下，

//menuList变量对应的就是文章开头处给出的示例数据
 

        最终，我们就能完成这样的一个递归型菜单组件了，但是对于菜单的样式，可以根据实际需要进行定制。