vue element html左侧菜单,vue生成element左侧菜单

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

{{logo}}

LG

:background-color="backgroundColor"

:text-color="textColor"

:default-active="$route.meta.pageId"

:collapse="collapse"

>

{{item.name}}

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

随机推荐

php 读取json数据文本所遇到的问题

json数据属于特殊的字符串,一般自己写的json数据不要误加空格,回车,换行, 若是从其他文件读取过来的json数据很有可能带有空格,回车,换行等符号,导致使用json_decode()转诚数组失败 ...

SQL入门经典(一)之简介

今天是我第一天开通博客,也是我的第一篇博客.以后为大家带来第一篇关于学习技术性文章,这段时间会为大家带来是SQL入门学习.希望大家坚持读下去,因为学历有限.我也是初学者.语言表达能力不好和知识点不足, ...

用一个下午从零开始搭建一个基础lbs查询服务

背景 现在做一个sns如果没有附近的功能,那就是残缺的.网上也有很多现成的lbs服务,封装的很完整了. 我首先用了下百度lbs云,但是有点不适合自己的需要,因此考虑用mongodb建一个简单的lbs服 ...

SQL存储过程调试

转自:http://www.cnblogs.com/xiangzhong/archive/2012/10/27/2742974.html 今天突然有同事问起,如何在sqlserver中调试存储过程(我 ...

VS2012 编译GDAL

先安装VS 2012, 然后下载GDAL最新版本代码,解压. 用管理员权限打开Developer Command Prompt for VS2012终端,进入代码目录. 然后运行命令: nmake / ...

C＋＋库研究笔记——函数名的宏定义

6.47 Function Names as Strings:http://gcc.gnu.org/onlinedocs/gcc/Function-Names.html GCC provides th ...

Cocos Creator 监听安卓屏幕下方返回键

addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...

Windos下pip配置豆瓣源

C:\Users\liche\pip 下创建pip.ini文件 pip.ini [global] index-url = http://pypi.douban.com/simple [install] ...

Hibernate的主配置文件hibernate.cfg.xml

1:Hibernate的主配置文件的名字必须是hibernate.cfg.xml(主要配置文件中主要配置:数据库连接信息,其他参数,映射信息):常用配置查看源码:Hibernate\hibernate ...

Redis脚本

8.启动 /usr/local/bin/redis-server /etc/redis/redis.conf ./redis-server /home/work/redis/redis.conf &a ...