vueelement生成无线级左侧菜单的实现代码
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu
为子级节点,el-menu-item
表示没有下级。当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现。根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码:
成都创新互联公司从2013年创立,先为霍林郭勒等服务建站,霍林郭勒等地企业,进行企业商务咨询服务。为霍林郭勒企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
请求数据格式
[ { 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: [] } ]
menu.vue
submenu.vue
这里有个知识点functional,不懂自行百度,文档地址: https://cn.vuejs.org/v2/guide/render-function.html#search-query-sidebar
5{{props.data.name}} {{item.name}}
效果图
总结
以上所述是小编给大家介绍的vue element 生成无线级左侧菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时会及时回复大家的!
本文名称:vueelement生成无线级左侧菜单的实现代码
文章出自:http://pwwzsj.com/article/gecosp.html