快捷導(dǎo)航

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

更新時間：2019年04月25日 14:11:03 作者：王世春

這篇文章主要介紹了VUE Element-UI多級菜單動態(tài)渲染的組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

以下是組件代碼：

<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)用也比較簡單

 <!--左側(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": "帳號管理",
            "state": "ENABLE",
            "sort": 0,
            "value": "",
            "type": "NONE",
            "discription": "用于帳號管理的菜單",
            "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": "評論管理",
            "state": "ENABLE",
            "sort": 2,
            "value": "/content/comment",
            "type": "LINK",
            "discription": "用于評論管理的菜單",
            "createUserId": 1
          },
          "childs": null
        }
      ]
    }
  ]
}

總結(jié)：當(dāng)遇到多叉樹或無限層級問題時，vue的遞歸組件是個比較好的解決方案，可以較大的節(jié)約開發(fā)時間降低開發(fā)成本。

以上所述是小編給大家介紹的VUE Element-UI多級菜單動態(tài)渲染的組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: