vue+element-ui实现无限级动态菜单树

时间 2019-12-01

标签 vue+element vue element 实现无限动态菜单繁體版

原文原文链接

使用vue+element-ui实现无限级动态菜单

该案例实现主要使用递归的思想，递归对新人来容易迷惑的是本身调用本身，直到知足条件为止，接下来咱们就一步一步实现一个动态多级菜单vue组件css

搭建项目并安装element-uihtml

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

不是本文重点自行查看element-ui官网vue

在main.js中引入element-uiwebpack

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)
})

编写菜单树组件 menutreeweb

<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循环，直到没有子菜单，循环结束vue-cli

设计菜单数据npm

"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": "角色管理"
}]
}

仅为测试数据element-ui

其余组件调用
html <template> <div class="left"> <el-menu> <menutree :data="menu_data"></menutree> </el-menu> </div> </template>json

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>

实现效果bash

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