vue+element-ui實現無限級動態菜單樹

使用vue+element-ui實現無限級動態菜單

該案例實現主要使用遞歸的思想，遞歸對新人來容易迷惑的是自己調用自己，直到滿足條件為止，接下來我們就一步一步實現一個動態多級菜單vue組件

1. 搭建項目並安裝element-ui

   npm i -g vue-cli
   vue init webpack myproject-name
   cd myproject-name/
   npm install
   npm i element-ui -S
   

   不是本文重點 自行查看element-ui官網

2. 在main.js中引入element-ui

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import App from './App.vue'
   
   Vue.use(ElementUI)
   
   new Vue({
   el: '#app',
   render: h => h(App)
   })
   

3. 編寫菜單樹組件 menutree

   <template>
   <div class="menutree">
       <label v-for="menu in data" :key="menu.index">
       <el-submenu :index="menu.index" v-if="menu.children">
           <template slot="title">
           <span>{{menu.name}}</span>
           </template>
           <label>
           <menutree :data="menu.children"></menutree>
           </label>
       </el-submenu>
       <el-menu-item v-else :index="menu.index">
           <span slot="title">{{menu.name}}</span>
       </el-menu-item>
       </label>
   </div>
   </template>
   

   <script>
   import menutree from "@/views/home/menutree";
   export default {
   name: "menutree",
   data() {
       return {
       menu_data: {}
       };
   },
   components: {
       menutree: menutree
   },
   props: ["data"],
   };
   </script>
   

   代碼分析
   for循環所有的菜單，如果沒有子菜單則創建menuitem，否則創建submenu，並且把該子菜單作為數據重新for循環，直到沒有子菜單，循環結束

4. 設計菜單數據

   "menu_data": [{
       "index": "1",
       "name": "用戶管理",
       "children": [{
           "index": "1-2",
           "name": "用戶列表",
           "children": [{
               "index": "1-2-1",
               "name": "用戶列表查詢",
               "children": [{
                   "index": "1-2-1-1",
                   "name": "用戶列表查詢",
                   "children": [{
                       "index": "1-2-1-1-1",
                       "name": "用戶列表查詢",
                       "children": [{
                           "index": "1-2-1-1-1-1",
                           "name": "用戶列表查詢"
                       }]
                   }]
               }]
   
           }]
       }]
   }, {
       "index": "2",
       "name": "角色管理"
   }, {
       "index": "3",
       "name": "用戶管理"
   }, {
       "index": "4",
       "name": "角色管理"
   }]
   }
   

   僅為測試數據

5. 其他組件調用

   <template>
       <div class="left">
           <el-menu>
           <menutree :data="menu_data"></menutree>
           </el-menu>
       </div>
   </template>
   

   import menutree from "@/views/home/menutree";
   import { home } from "@/config/init.json";
   export default {
   components: {
       menutree: menutree
   },
   data() {
       return {
       menu_data: {}
       };
   },
   mounted() {
       this.menu_data = home.left.menu_data;
   }
   };
   </script>
   

6. 實現效果

   

有任何疑問或建議歡迎留言