首先来总结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: []

}

]

menu.vue

import subMenu from "./subMenu";

export default {

name: "menuList",

components: {

subMenu

},

data() {

return {

collapse: false, //是否折叠

list: [], //当行菜单数据源

backgroundColor: "#304156", //导航菜单背景颜色

textColor: "#BFCBD9", //导航菜单文字颜色

logo: "LOGO" //logo

};

}

};

.el-menu {

border-right: none;

a {

text-decoration: none;

}

}

.logo-con {

height: 64px;

padding: 10px;

.title {

position: relative;

text-align: center;

font-size: 20px;

height: 64px;

line-height: 64px;

span {

padding: 0 5px 0 0;

color: #409eff;

font-size: 20px;

}

}

}

submenu.vue

{{props.data.name}}

{{item.name}}

export default {

name: "submenu",

props: {

data: [Array, Object]

}

};

.el-submenu {

.el-menu-item {

padding: 0;

}

}

效果图

vue 首页导航+左侧菜单

1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...

使用layui-tree美化左侧菜单，点击生成tab选项

layui-tree美化左侧菜单 html