element el-menu动态菜单

最新推荐文章于 2025-06-18 14:39:56 发布

原创最新推荐文章于 2025-06-18 14:39:56 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

element 专栏收录该内容

10 篇文章

订阅专栏

这个博客展示了如何使用Vue.js创建一个无限级菜单组件。通过`v-for`指令和递归组件`MenuTree`实现了菜单的动态展开，并且监听了菜单项的点击事件，传递数据到父组件。组件中包含了样式定义，确保选中状态的视觉效果。数据结构包含多级菜单项，每个菜单项可能有子菜单项，形成一个多级导航结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件：

    <template>
    <div>
        <template v-for="(item,index) in menuList">
        <!-- 有次级菜单的,则展开子选项-->
        <el-submenu v-if="item.children && item.children.length>0" :key="index" :index="item.id">
            <template #title>
            <!-- <el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon> -->
                <span >{{item.name}}</span>
            </template>
            <!-- 递归,实现无限级展开 -->
            <MenuTree :menuList="item.children" @childEvent="chosedMenu" :key="index" ></MenuTree>
        </el-submenu>
        <!-- 没有次级菜单的 -->
        <el-menu-item  v-if="!item.children" :key="index" @click="routerGo(item,index)" :index='item.remark' :class="activeMenu==index?'activeMenu':''" >
            <!-- <el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon> -->
            <span >{{item.name}}</span>
        </el-menu-item>
        </template>
    </div>
    </template>
    
    <script>

    export default {
        name: 'MenuTree',
        props:{
            menuList:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        data(){
            return{
                chosed:'',
            }
        },
        mounted(){
            // console.log(this.menuList,'123');
            //  this.$emit('childEvent',i)
        },
        methods: {
            // 菜单点击的操作
            routerGo(i,index){
                console.log(i,index);
                this.$emit('childEvent',i)
                this.chosed = index
            },
            // 接受本身组件传来的参数，然后将传来得值，发送到外层父组件
            chosedMenu(i){
                this.$emit('childEvent',i)
            },

        }
    }
    </script>
    <style scoped lang='scss'>
   .activeMenu{
    color: #fff !important;
    background: #2055b0 !important;
   }
    /* 菜单栏选中后背景色 */
    .el-menu-item {
        color: #ffffff;
    } 
    .el-menu-item.is-active {
        color: #fff;
        background: #2055b0 !important;
    }	

/*选中菜单后的操作*/
     .is-active {
        background: #2055b0 !important;
      }
    </style>

父组件：

 <el-menu 
              :default-active='menuList[0].remark'
              class="el-menu-vertical-demo"
              text-color="rgb(195, 200, 203)"
              background-color="#192654"
              active-text-color="#fff"
              :unique-opened="true"
              
					   >
				      <MenuTree :menuList="menuList" @childEvent="chosedMenu"></MenuTree>
				    </el-menu>

数据：

menuList:[
            {
            id:1,
            parentid:'0',
            name:'测试菜单',
            icon:'HomeFilled',
            remark: 'loadbusi/workSys/workOrder',
            },
            {
              id:2,
              parentid:'0',
              name:'实训室',
              icon:'UserFilled',
              children:[
                  {
                    id:3,
                    parentid:'2',
                    name:'测试菜单1',
                    icon:'',
                    children:[
                      {
                        id:4,
                        parentid:'2',
                        name:'测试菜单1-1',
                        icon:'',
                        remark: 'loadbusi/workSys/workTotal',

                      }
                    ]
                  },
                  {
                    id:5,
                    parentid:'2',
                    name:'测试菜单2',
                    icon:'',
                    remark: 'loadbusi/emergency/demandManage',
                  }
                ]
            },
	  ],