elementui树状菜单tree_vue+element-ui实现无限级动态菜单树

搭建项目并安装element-ui

npm i -g vue-cli

vue init webpack myproject-name

cd myproject-name/

npm install

npm i element-ui -S

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

})

编写菜单树组件 menutree

{{menu.name}}

{{menu.name}}

import menutree from "@/views/home/menutree";

export default {

name: "menutree",

data() {

return {

menu_data: {}

};

},

components: {

menutree: menutree

},

props: ["data"],

};

代码分析

for循环所有的菜单，如果没有子菜单则创建menuitem，否则创建submenu，并且把该子菜单作为数据重新for循环，直到没有子菜单，循环结束

设计菜单数据

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

}]

}

仅为测试数据

其他组件调用

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;

}

};

实现效果