《elementui菜单(elementui左侧菜单)》

在使用Element UI构建应用时，实现左侧菜单是一项常见的需求。对于这一需求的解决方案是借助Element UI提供的Menu组件，它可以轻松创建一个功能丰富、样式美观的左侧菜单，通过简单的配置项和事件绑定即可满足大多数场景下的菜单展示与交互需求。

一、基础菜单实现

引入Element UI的Menu组件相关样式和脚本。然后在页面中简单地使用如下代码：

html

    
        
            <i class="el-icon-menu"></i>
            <span>首页</span>
        
        
            <i class="el-icon-document"></i>
            <span>管理</span>
        
        
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
        
    
</p>


export default {
    data() {
        return {
            activeIndex: '1'
        }
    }
}


<p>``<code>
以上代码中，el-menu是菜单容器，el-menu-item是菜单项。:default - active`属性用于设置默认选中的菜单项索引。每个菜单项都有图标和标题内容。


二、带有子菜单的菜单

如果菜单存在层级关系，可以使用el - submenu组件来表示子菜单。
```html

    
        
            
            首页
        
        
            
                
                管理
            
            新增
            编辑
        
        
            
            系统设置
        
    



export default {
    data() {
        return {
            activeIndex: '1'
        }
    }
}

三、菜单路由跳转

为了让菜单项点击后能够进行页面跳转（假设使用vue - router），可以在el - menu - item或el - submenu中绑定点击事件，在方法中实现路由跳转逻辑。

html

    
        
            <i class="el-icon-menu"></i>
            <span>首页</span>
        
        
            
                <i class="el-icon-document"></i>
                <span>管理</span>
            
            新增
            编辑
        
        
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
        
    
</p>


export default {
    data() {
        return {
            activeIndex: '1'
        }
    },
    methods: {
        handleClick(path) {
            this.$router.push({path: '/'+ path})
        }
    }
}


<p>

除了上述思路外，还可以根据实际需求对菜单进行更多自定义，如添加徽标、修改菜单样式等。Element UI的菜单组件为实现左侧菜单提供了便捷而强大的工具。