技術標籤：jscssjavascript

1.建立一個帶子選單的選單列表MenuUtils.js,如下:

var menus = [
            {
                name:"離線",
                index:"offline",
            },
            {
                name:"日誌",
                index:"log",
            }, 
            {
                name:"設定",
                index:"setting", 
                children:[                    
                    {
                        name:"基本配置",
                        index:"setting",                                      
                    },
                   {                {
                        name:"特殊配置",
                        index:"setting3",         
                    },          
            ]     
  },
]
 

2.封裝動態渲染元件,自定義一個item.vue

<template>
    <div class="menu">
        <template class="menu-item" v-for="item in this.menus">
            <el-submenu v-if="item.children && item.children.length" :index="item.index" :key="item.name">
                <template slot="title">
                    <span slot="title">{{item.name}}</span>
                </template>
                <item :menus="item.children"></item>
            </el-submenu>
            <el-menu-item v-else :index="item.index" :key="item.name">
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
import MenuUtils from "MenuUtils"; //引入建立的子選單
export default {
    name:"item",
    props:{
        menus:{
            type:Array
        },
        active:String
    },
    data(){
        return {
        }
    },
    mounted(){
    },
    methods:{
    }
}
</script>
 

3.最後在需要的地方引入封裝元件即可.

<el-menu
            :default-active="activeIndex" >
        <template class="item" v-for="item in menus" >
            <el-submenu  v-if="item.children && item.children.length" :index="item.index" :key="item.name" >
                <template slot="title">
                    <span style="font-size: 18px" slot="title">{{ item.name }}</span>
                </template>
                 <item :menus="item.children" id='sub' ></item>
            </el-submenu>
            <el-menu-item v-else :index="item.index" :key="item.name" class="item">
                  <span style="font-size: 18px">{{ item.name }}</span>
            </el-menu-item>
        </template>
        </el-menu>

```


import item from 'item'