vueelement生成无线级左侧菜单的实现代码-创新互联
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu
为子级节点,el-menu-item
表示没有下级。当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现。根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码:
请求数据格式
[ { name: "首页", id: -1, icon: "el-icon-picture-outline-round", url: "/index", children: [] }, { name: "按钮", id: 20, icon: "el-icon-message-solid", url: "/button", children: [] }, { name: "测试1", id: 1, icon: "el-icon-s-claim", url: "", children: [ { id: 4, parentid: 1, name: "测试1-1", icon: "el-icon-chat-dot-round", url: "", children: [ { id: 8, parentid: 1, name: "测试1-1-1", icon: "el-icon-cloudy", url: "/test", children: [] }, { id: 9, parentid: 1, name: "测试1-1-2", icon: "el-icon-files", url: "/test1", children: [] } ] }, { id: 5, parentid: 1, name: "测试1-2", icon: "el-icon-shopping-cart-1", url: "/test3", children: [] } ] }, { name: "测试2", id: 2, icon: "el-icon-menu", url: "", children: [ { id: 6, parentid: 2, name: "测试2-1", icon: "el-icon-folder-checked", url: "", children: [] }, { id: 7, parentid: 2, name: "测试2-2", icon: "el-icon-folder-remove", url: "", children: [] } ] }, { name: "测试3", id: 3, icon: "el-icon-monitor", url: "", children: [] } ]
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:vueelement生成无线级左侧菜单的实现代码-创新互联
当前URL:http://myzitong.com/article/cdiiog.html