一点飞鸿影下

孤村落日残霞,轻烟老树寒鸦,一点飞鸿影下。 青山绿水,白草红叶黄花。

导航

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. 实现效果

有任何疑问或建议欢迎留言

posted on 2019-05-21 02:30  一点飞鸿影下  阅读(17297)  评论(4编辑  收藏  举报