vue react 多级菜单动态渲染导航菜单(一级二级三级不限层级渲染)

本文链接：https://blog.csdn.net/weixin_43787651/article/details/111871409

1.创建一个带子菜单的菜单列表MenuUtils.js,如下:

var menus = [
            {
                name:"离线",
                index:"offline",
            },
            {
                name:"日志",
                index:"log",
            }, 
            {
                name:"设置",
                index:"setting", 
                children:[                    
                    {
                        name:"基本配置",
                        index:"setting",                                      
                    },
                   {                {
                        name:"特殊配置",
                        index:"setting3",         
                    },          
            ]     
  },
]

2.封装动态渲染组件item,并导入,在需要的地方引用就可以了.

<template>
    <div>
        <template v-for="item in menus">
            <el-submenu v-if="item.children && item.children.length" :index="item.name" :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.name" :key="item.name">
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
    name:"item",
    props:{
        menus:{
            type:Array
        },
        active:String
    },
    data(){
        return {

        }
    },
    mounted(){

    },
    methods:{

    }
}
</script>

3.直接引用封装组件.

<template>
  <div>
    <el-menu
      :collapse="iscollapse"
      :default-active="active.name"
      :unique-opened="true"
      @select="menuSelect"
    >
      <v-menu :menus="menu"></v-menu>
    </el-menu>
  </div>
</template>
<script>
import vMenu from "./menu.vue";
export default {
  components: {
    vMenu,
  },
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>