1. Introduce element-UI in main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui'

Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({  
    el: '#app'Router, store, // Store Components: {App}, template:'<App/>'
})

Copy the code

2. Write the menutree component 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">                    
                    <i class="el-icon-user-solid icon-user"></i>                    
                    <span>{{menu.name}}</span>                
                </template>                
                <label>                    
                    <menutree :data="menu.children"></menutree>                
                </label>            
            </el-submenu>            
            <el-menu-item v-else :index="menu.index">                
                <i class="el-icon-user-solid icon-user"></i>                
                <span slot="title">{{menu.name}}</span>            
            </el-menu-item>        
        </label>    
    </div>
</template>
<script>    
    import menutree from "./menutree";    
    export default {        
        name: "menutree".data() {            
            return{}; }, components: { menutree: menutree }, props: ["data"]}; </script> <style scoped> .icon-user{ font-size: 16px; color:#e4e4e4;    
    }
</style>

Copy the code

3. Call other components

        
<el-menu  
    class="el-menu-vertical-demo"            
    background-color="#545c64"            
    text-color="#fff"            
    active-text-color="#ffd04b"            
    :unique-opened="true"            
    :default-active="defaultActive"            
    @open="handleOpen"             
    @close="handleClose"          
>             
    <menutree :data="menuData"></menutree>           
</el-menu>

Copy the code

import menutree from "./menutree";
import { roleTree } from '@/request/api';Copy the code

export default {
data() {
    return {
      menuData: {}
    };
},components: {
    menutree: menutree
},

mounted() { this.getRoleTree(); }, methods: {// Get the role treegetRoleTree() {        
        let param = {          
            userId: this.$cookies.get('userId')        
        }        
        roleTree(param).then(res => {              
            if(res.code == 0){                  
                console.log(res.data.children)                  
                this.menuData = res.data.children;                  
                this.defaultActive = this.menuData[0].index;              
            }else{                  
                this.$message({                      
                    message: res.msg,                      
                    type: 'warning'})})}, // Menu callback function handleOpen(key, keyPath) {// console.log()'open',key, keyPath);        
            for(let i in key){            
                if(i == (key.length - 1)){ this.roleId = key; this.getRoleDetail(); }}}, // menu callback function handleClose(key, keyPath) {// console.log(keyPath, keyPath) {// console.'close',key, keyPath);        
            this.roleId = key;        
            for(let i in key){            
                if(i == (key.length - 1)){ this.roleId = key; this.getRoleDetail(); }}},}}};Copy the code

4. Data format

{
	"code":"0"."data": {"children":[
			{
				"children":[
					{
						"children": []."createTime":"The 2019-10-25 00:07:21"."desc":"Office of Academic Affairs"."engName":"dean's office Administrator"."id": 5,"index":"5"."modifyTime":"The 2019-10-29 01:44:25"."name":"Academic"."parentId": 1,"sysId":1
					},
					{
						"children":[
							{
								"children": []."createTime":"The 2019-10-29 01:13:42"."desc":"Small"."engName":"lemon"."id": 14."index":"14"."name":"A small part"."parentId": 4."sysId":2
							},
							{
								"children": []."createTime":"The 2019-10-29 01:17:50"."desc":"Ha ha ha."."engName":"lenmon"."id": 15."index":"15"."name":"The Role of Mango."."parentId": 4."sysId":2
							},
							{
								"children": []."createTime":"The 2019-10-29 01:19:23"."desc":"!"."engName":"sweet"."id": 16."index":"16"."name":"The role of polysaccharides."."parentId": 4."sysId":1
							},
							{
								"children": []."createTime":"The 2019-10-29 01:56:45"."desc":"!"."engName":"mingming"."id": 20."index":"20"."name":"Mingming's Role."."parentId": 4."sysId":1
							},
							{
								"children": []."createTime":"The 2019-10-29 02:02:50"."desc":"Ha ha"."engName":"pupu"."id": 21."index":"21"."name":"Pu Pu's Role."."parentId": 4."sysId": 1}]."createTime":"The 2019-10-25 00:07:20"."desc":"Administrator"."engName":"Administrator"."id": 4."index":"4"."modifyTime":"The 2019-10-25 00:08:12"."name":"Administrator"."parentId": 1,"sysId":1
					},
					{
						"children":[
							{
								"children": []."createTime":"The 2019-10-29 01:50:28"."desc":"sf "."engName":"lenmon"."id": 19,"index":"19"."name":"Warehouse man"."parentId": 6,"sysId": 1}]."createTime":"The 2019-10-25 00:07:21"."desc":"Device Manager"."engName":"device Administrator"."id": 6,"index":"6"."modifyTime":"The 2019-10-25 00:09:50"."name":"Device Manager"."parentId": 1,"sysId": 1}]."createTime":"The 2019-10-15 19:17:11"."desc":"Administrator"."engName":"Super Administrator"."id": 1,"index":"1"."modifyTime":"The 2019-10-18 23:00:41"."name":"Super Administrator"."parentId": 0."sysId":1
			},
			{
				"children":[
					{
						"children": []."createTime":"The 2019-10-29 01:42:44"."desc":"Head teacher"."engName":"class Manager"."id": 17."index":"17"."modifyTime":"The 2019-10-29 01:43:41"."name":"Head teacher"."parentId": 3."sysId": 2}],"createTime":"The 2019-10-18 19:58:49"."desc":"Teacher"."engName":"Teacher"."id": 3."index":"3"."modifyTime":"The 2019-10-29 01:43:22"."name":"Teacher"."parentId": 0."sysId":2
			},
			{
				"children": []."createTime":"The 2019-10-18 19:58:48"."desc":"Students"."engName":"Student"."id": 2."index":"2"."modifyTime":"The 2019-10-29 01:43:18"."name":"Students"."parentId": 0."sysId":2
			},
			{
				"children": []."createTime":"The 2019-10-26 02:19:41"."desc":"Parents"."engName":"patriarch"."id": 13."index":"13"."modifyTime":"The 2019-10-26 02:21:53"."name":"Parents"."parentId": 0."sysId": 1}]."id": 0."index":"0"
	},
	"msg":"Operation successful"
}Copy the code

5. Effect display



6. Pay attention to

Menu index data type is string!!Copy the code