首先来总结元素用户界面官方文档的左侧菜单结构，带有埃尔-子菜单为子级节点，埃尔-菜单项表示没有下级。当然，菜单不能写死，因为菜单也许不止两级，所以我们需要递归来实现。根据当前节点是否有下级去判断，如果有下级，则继续调用子级，直到没有下级为止，下面我贴上左侧菜单所有的代码：

请求数据格式

[ { 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 '，图标： ' El-icon-chat-dot-round '，url: ' '，children: [ { id: 8，parentid: 1，name: '测试1-1-1 '，图标： ' El-icon-多云，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 '，图标： ' El-icon-购物车-1 '，url: '/test3 '，children: [] } ] }，{ name: '测试2 '，id: 2，icon: 'el-icon-menu '，url: ' '，children: [ { id: 6，parentid: 2，name: '测试2-1 '，图标： ' El-icon-folder-checked '，url: ' '，children: [] }，{ id: 7，parentid: 2，name: '测试2-2 '，图标： ' El-icon-folder-remove '，url: ' '，children :[]} }，{ name: '测试3 '，id: 3，icon: 'el-icon-monitor '，url: ' '，children: [] } ]menu.vue

模板div class=' menu ' div class=' logo-con ' div class=' title ' v-show='！折叠span class=' title _ _ sider-title is-active ' { logo } }/span/div class=' title ' v-show=' collapse ' span class=' title _ _ sider-title El-tag-mini ' LG/span/div/div El-menu : background-color=' background color ' : text-color=' text color ' : default-active=' $ route。梅塔。页面id ' : collapse=' collapse '模板v-for=' item '/SUPPORT '；导出默认{ name: 'menuList '，components 3360 { Subscription }，data(){ return { collapse : false，//是否折叠list: []，//当行菜单数据源backgroundColor: '#304156 '，//导航菜单背景颜色textColor: '#BFCBD9 '，//导航菜单文字颜色LOGO : ' LOGO '//LOGO }；}};/script style lang=' SCS '作用域。El-menu {边框-右侧：无；a { text-decoration : none}}.logo-con {高度： 64pxpadding: 10px .标题{位置：相对；文本对齐：中心；font-size : 20px高度： 64px线高： 64pxspan { padd : 0 5px 0 0 color : # 409 eff font-size : 20px；} } }/style subscribe。某视频剪辑软件

这里有个知识点功能性的，不懂自行百度，文档地址： https://cn。vuejs。org/v2/guide/render-functionhtml #搜索-查询-侧栏

5 !-* @描述： * @作者： PengYH * @日期： 2019-08-06-模板函数埃尔-子菜单：索引='道具。数据。身份证。' tostring()'模板槽=' title ' I : class='道具。数据。图标/I span { {道具。数据。名称} }/span/模板道具中的v-for='项目。数据。子路由器-链接：到='/脚本样式lang=' SCS '作用域。高架铁道子菜单{。埃尔菜单项{ padd : 0；} }/样式效果图

总结

以上所述是小编给大家介绍的某视频剪辑软件元素生成无线级左侧菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时会及时回复大家的！