以下是組件代碼：
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了綏中免費(fèi)建站歡迎大家使用！
外部調(diào)用也比較簡(jiǎn)單
最后看下效果：
值得一提的是，完成此菜單需要后端的配合，筆者這里后端給出的數(shù)據(jù)為：
重慶分公司
重慶分公司
{
"entity": null,
"childs": [
{
"entity": {
"id": 1,
"parentMenuId": 0,
"name": "systemManage",
"icon": "el-icon-message\r\n",
"alias": "系統(tǒng)管理",
"state": "ENABLE",
"sort": 0,
"value": null,
"type": "NONE",
"discription": "用于系統(tǒng)管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 3,
"parentMenuId": 1,
"name": "authManage",
"icon": "el-icon-loading",
"alias": "權(quán)限管理",
"state": "ENABLE",
"sort": 0,
"value": "/system/auth",
"type": "LINK",
"discription": "用于權(quán)限管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 4,
"parentMenuId": 1,
"name": "roleManage",
"icon": "el-icon-bell",
"alias": "角色管理",
"state": "ENABLE",
"sort": 1,
"value": "/system/role",
"type": "LINK",
"discription": "用于角色管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 2,
"parentMenuId": 1,
"name": "menuManage",
"icon": "el-icon-edit",
"alias": "菜單管理",
"state": "ENABLE",
"sort": 2,
"value": "/system/menu",
"type": "LINK",
"discription": "用于菜單管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 5,
"parentMenuId": 1,
"name": "groupManage",
"icon": "el-icon-mobile-phone\r\n",
"alias": "分組管理",
"state": "ENABLE",
"sort": 3,
"value": "/system/group",
"type": "LINK",
"discription": "用于分組管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 6,
"parentMenuId": 0,
"name": "userManage",
"icon": "el-icon-news",
"alias": "用戶管理",
"state": "ENABLE",
"sort": 1,
"value": null,
"type": "NONE",
"discription": "用于用戶管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 7,
"parentMenuId": 6,
"name": "accountManage",
"icon": "el-icon-phone-outline\r\n",
"alias": "帳號(hào)管理",
"state": "ENABLE",
"sort": 0,
"value": "",
"type": "NONE",
"discription": "用于帳號(hào)管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 14,
"parentMenuId": 7,
"name": "emailManage",
"icon": "el-icon-sold-out\r\n",
"alias": "郵箱管理",
"state": "ENABLE",
"sort": 0,
"value": "/content/email",
"type": "LINK",
"discription": "用于郵箱管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 13,
"parentMenuId": 7,
"name": "passManage",
"icon": "el-icon-service\r\n",
"alias": "密碼管理",
"state": "ENABLE",
"sort": 1,
"value": "/content/pass",
"type": "LINK",
"discription": "用于密碼管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 8,
"parentMenuId": 6,
"name": "integralManage",
"icon": "el-icon-picture",
"alias": "積分管理",
"state": "ENABLE",
"sort": 1,
"value": "/user/integral",
"type": "LINK",
"discription": "用于積分管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 9,
"parentMenuId": 0,
"name": "contentManage",
"icon": "el-icon-rank",
"alias": "內(nèi)容管理",
"state": "ENABLE",
"sort": 2,
"value": null,
"type": "NONE",
"discription": "用于內(nèi)容管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 10,
"parentMenuId": 9,
"name": "classifyManage",
"icon": "el-icon-printer",
"alias": "分類管理",
"state": "ENABLE",
"sort": 0,
"value": "/content/classify",
"type": "LINK",
"discription": "用于分類管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 11,
"parentMenuId": 9,
"name": "articleManage",
"icon": "el-icon-star-on",
"alias": "文章管理",
"state": "ENABLE",
"sort": 1,
"value": "/content/article",
"type": "LINK",
"discription": "用于文章管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 12,
"parentMenuId": 9,
"name": "commentManage",
"icon": "el-icon-share",
"alias": "評(píng)論管理",
"state": "ENABLE",
"sort": 2,
"value": "/content/comment",
"type": "LINK",
"discription": "用于評(píng)論管理的菜單",
"createUserId": 1
},
"childs": null
}
]
}
]
}
總結(jié)：當(dāng)遇到多叉樹(shù)或無(wú)限層級(jí)問(wèn)題時(shí)，vue的遞歸組件是個(gè)比較好的解決方案，可以較大的節(jié)約開(kāi)發(fā)時(shí)間降低開(kāi)發(fā)成本。
以上所述是小編給大家介紹的VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
