element ui 菜单组件实现多级菜单渲染

因为element ui 的模板不支持多级渲染菜单，需要我们自己去重构：

那就开始吧：我的这个需要通过路由传参，所以做了点修改：

1. 新建一个组件 test.vue：上代码：

2 . 在外部页面引用：

 

    

    default-active="2"

    style="padding-bottom: 90px;"

    class="el-menu-vertical-demo"

    @open="handleOpen"   

    @close="handleClose"

    router

    background-color="rgba(0, 21, 41, 1)"

    text-color="#fff"

    active-text-color="#ffd04b"

    active-background-color="#ffd04b">

     

       

      

 

3.这里所用到的数据格式，最好让后端配合：

{

    "entity": null,

    "childs": [{

        "entity": {

          "Id": '42',

          'PicName': '#',

          "PicUrl": '#',

          "label": "交易管理",

          "num": "1",

          "remark": null,

          "url": ""

        },

        "childs": [{

          "entity": {

            "Id": '43',

            'PicName': '#',

            "PicUrl": '#',

            "label": "交易明细",

            "num": null,

            "remark": null,

            "url": "/homedetail"

          },

          "childs": null

        }, ]

      },

      {

        "entity": {

          "Id": '44',

          'PicName': '#',

          "PicUrl": '#',

          "label": "商户管理",

          "num": "2",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '45',

              'PicName': '#',

              "PicUrl": '#',

              "label": "商户信息（直营）",

              "num": null,

              "remark": null,

              "url": "/storelist"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '46',

              'PicName': '#',

              "PicUrl": '#',

              "label": "商户信息（所有）",

              "num": null,

              "remark": null,

              "url": "/storelist2"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '47',

          'PicName': '#',

          "PicUrl": '#',

          "label": "代理商管理",

          "num": "3",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '48',

              'PicName': '#',

              "PicUrl": '#',

              "label": "代理商列表",

              "num": null,

              "remark": null,

              "url": "/agentpage"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '49',

              'PicName': '#',

              "PicUrl": '#',

              "label": "提现审批",

              "num": null,

              "remark": null,

              "url": "/approval"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '50',

          'PicName': '#',

          "PicUrl": '#',

          "label": "市场管理",

          "num": "4",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '51',

              'PicName': '#',

              "PicUrl": '#',

              "label": "业务员管理（直营）",

              "num": null,

              "remark": null,

              "url": "/salesman"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '52',

              'PicName': '#',

              "PicUrl": '#',

              "label": "业务员管理（所有）",

              "num": null,

              "remark": null,

              "url": "/salesman2"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '53',

          'PicName': '#',

          "PicUrl": '#',

          "label": "二维码管理",

          "num": "5",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '54',

              'PicName': '#',

              "PicUrl": '#',

              "label": "添加二维码",

              "num": null,

              "remark": null,

              "url": "/addqrcode"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '55',

              'PicName': '#',

              "PicUrl": '#',

              "label": "直营二维码",

              "num": null,

              "remark": null,

              "url": "/qrcodelist"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '56',

              'PicName': '#',

              "PicUrl": '#',

              "label": "所有二维码",

              "num": null,

              "remark": null,

              "url": "/qrcodelist2"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '57',

          'PicName': '#',

          "PicUrl": '#',

          "label": "设备码管理",

          "num": "6",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '58',

              'PicName': '#',

              "PicUrl": '#',

              "label": "添加设备码",

              "num": null,

              "remark": null,

              "url": "/adddevice"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '59',

              'PicName': '#',

              "PicUrl": '#',

              "label": "直营设备码",

              "num": null,

              "remark": null,

              "url": "/devicecodelist"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '60',

              'PicName': '#',

              "PicUrl": '#',

              "label": "所有设备码",

              "num": null,

              "remark": null,

              "url": "/devicecodelist2"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '61',

          'PicName': '#',

          "PicUrl": '#',

          "label": "权限管理",

          "num": "7",

          "remark": null,

          "url": ""

        },

        "childs": [{

            "entity": {

              "Id": '62',

              'PicName': '#',

              "PicUrl": '#',

              "label": "账号管理",

              "num": null,

              "remark": null,

              "url": "/usersupervise"

            },

            "childs": null

          },

          {

            "entity": {

              "Id": '63',

              'PicName': '#',

              "PicUrl": '#',

              "label": "权限管理",

              "num": "7",

              "remark": null,

              "url": "/jurisdiction"

            },

            "childs": null

          },

        ]

      },

      {

        "entity": {

          "Id": '64',

          'PicName': '#',

          "PicUrl": '#',

          "label": "系统参数管理",

          "num": "8",

          "remark": null,

          "url": ""

        },

        "childs": [{

          "entity": {

            "Id": '65',

            'PicName': '#',

            "PicUrl": '#',

            "label": "系统参数",

            "num": null,

            "remark": null,

            "url": "/system"

          },

          "childs": null

        }]

      },

      {

        "entity": {

          "Id": '75',

          'PicName': '#',

          "PicUrl": '#',

          "label": "菜单管理",

          "num": "9",

          "remark": null,

          "url": ""

        },

        "childs": [{

          "entity": {

            "Id": '76',

            'PicName': '#',

            "PicUrl": '#',

            "label": "菜单功能管理",

            "num": null,

            "remark": null,

            "url": "/menu"

          },

          "childs": null

        }]

      },

      {

        "entity": {

          "Id": '88',

          'PicName': '#',

          "PicUrl": '#',

          "label": "测试",

          "num": "10",

          "remark": null,

          "url": ""

        },

        "childs": [{

          "entity": {

            "Id": '89',

            'PicName': '',

            "PicUrl": '',

            "label": "测试11",

            "num": null,

            "remark": '',

            "url": "/ab"

          },

          "childs": [{

            "entity": {

              "Id": '90',

              'PicName': '',

              "PicUrl": '',

              "label": "测dfgdfgdfg试22",

              "num": null,

              "remark": '',

              "url": "/aps"

            },

            "childs": [

         {

              "entity": {

                "Id": '91',

                'PicName': '',

                "PicUrl": '',

                "label": "测dfgdgdfgdg试33",

                "num": null,

                "remark": '',

                "url": "/ass"

              },

              "childs": [

            {

              "entity": {

                "Id": '92',

                'PicName': '',

                "PicUrl": '',

                "label": "测试3jodfguhiu33",

                "num": null,

                "remark": '',

                "url": "/ass5"

              },

              "childs": null

       }

        ]

       }

       ]

          }]

        }]

      },

    ]

  }