欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年04月25日 14:11:03   作者：王世春  
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)用也比較簡(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)站的支持！

相關(guān)文章

  • vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類名

    vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類名

    這篇文章主要介紹了vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類名問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue?innerHTML?綁定單擊事件不生效的解決

    vue?innerHTML?綁定單擊事件不生效的解決

    這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • vue中$set用法詳解

    vue中$set用法詳解

    在vue中，并不是任何時(shí)候數(shù)據(jù)都是雙向綁定的，解決數(shù)據(jù)沒有被雙向綁定我們可以使用?vm.$set?實(shí)例方法，該方法是全局方法?Vue.set?的一個(gè)別名，這篇文章主要介紹了vue中$set用法詳細(xì)講解,需要的朋友可以參考下
    2022-12-12
  • 記錄vue項(xiàng)目中遇到的一點(diǎn)小問題

    記錄vue項(xiàng)目中遇到的一點(diǎn)小問題

    本文是腳本之家小編給大家收藏整理的關(guān)于vue項(xiàng)目中遇到的一點(diǎn)小問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • 使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）

    使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）

    這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • vue接口請(qǐng)求加密實(shí)例

    vue接口請(qǐng)求加密實(shí)例

    這篇文章主要介紹了vue接口請(qǐng)求加密實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue中使用vee-validator完成表單校驗(yàn)方案

    vue中使用vee-validator完成表單校驗(yàn)方案

    vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧
    2019-11-11
  • vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)

    vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)

    這篇文章主要介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-07-07
  • vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問題及解決方法

    vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問題及解決方法

    這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決,項(xiàng)目場(chǎng)景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問題記錄下來了，需要的朋友可以參考下解決方案
    2022-11-11
  • 詳解Vue源碼中一些util函數(shù)

    詳解Vue源碼中一些util函數(shù)

    這篇文章主要介紹了Vue源碼中一些util函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評(píng)論