国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件

2019-11-19 11:42:11
字體:
供稿:網(wǎng)友

以下是組件代碼:

<template> <div class="navMenu">   <label v-for="navMenu in navMenus">   <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"          :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"          disabled="">    <i :class="navMenu.entity.icon"></i>    <span slot="title">{{navMenu.entity.alias}}</span>   </el-menu-item>    <el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'"         :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">    <template slot="title">     <i :class="navMenu.entity.icon"></i>     <span> {{navMenu.entity.alias}}</span>    </template>    <NavMenu :navMenus="navMenu.childs"></NavMenu>   </el-submenu>  </label>  </div></template> <script> export default {  name: 'NavMenu',  props: ['navMenus'],  data() {   return {}  },  methods: {} }</script> <style scoped> </style>

外部調(diào)用也比較簡(jiǎn)單

 <!--左側(cè)菜單組件-->   <el-menu    default-active="0"    class="el-menu-vertical-demo"    @select="menuSelected"    background-color="#F0F6F6"    text-color="#3C3F41"    active-text-color="black">    <NavMenu :navMenus="leftMenus"></NavMenu>   </el-menu>

最后看下效果:

值得一提的是,完成此菜單需要后端的配合,筆者這里后端給出的數(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)遇到多叉樹或無限層級(jí)問題時(shí),vue的遞歸組件是個(gè)比較好的解決方案,可以較大的節(jié)約開發(fā)時(shí)間降低開發(fā)成本。

以上所述是小編給大家介紹的VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 怀集县| 冕宁县| 得荣县| 蓝田县| 黑水县| 彰化市| 沐川县| 赣榆县| 丹巴县| 碌曲县| 临洮县| 连云港市| 祥云县| 迁安市| 汝州市| 瑞丽市| 贵定县| 信丰县| 额敏县| 勐海县| 开鲁县| 长垣县| 德令哈市| 永顺县| 康乐县| 麻江县| 永寿县| 金平| 延庆县| 永年县| 藁城市| 望谟县| 江北区| 登封市| 孙吴县| 临洮县| 弥勒县| 景宁| 饶河县| 松溪县| 通辽市|