有很多网站会涉及到导航栏，我自己在开发中用的是element导航组件，并且自定义事件，给大家分享一下。

1.使用递归方法，无限循环子级菜单。

2.使用组件封装，维护方便。

3.使用index作为路由跳转。

4.结合后台动态渲染。

5.自定义样式，修改默认icon。

6.根据后台返回数据，动态设置默认选中。

1.封装组件。

　　首先创建好vue之后，在a_module里创建一个存放组件的文件夹，因为a_module是存放公共资源以及静态文件的，当然也可以根据喜好来创建。

2.调用组件。

　　在要使用到的页面中使用 import 引入封装好的组件，components初始化一下，在页面中使用。

注意：这里需要注意的是，在引用的页面中一定要el-menu包裹起来，可以在el-menu标签里来配置侧边栏的各种状态。

3.组件传值

　　

我是后台拿到的数据，当然也可以自定义数据，在引用组建的页面内创建，在子组件标签上边自定义事件，在子组件用props接收参数。

4.el-menu配置

　　这里呢，需要在父组件内配置侧边栏的各种状态，选中状态啦，index路由跳转啦，等等。

　　这里呢，我主要配置了，router：开启index跳转路由，default-active:默认选中，这里呢我做了很多判断，大家可以根据实际情况来做处理，我主要是拿到当前地址，来做选中状态。active-text-color:配置字体颜色，等等

5.子组件递归，无限循环子级

我呢用的是递归的方法，他的原理呢就是自己调用自己。

　　

注意看红色框中的内容，

（1）.大家可以看到，我在跟标签里边写了一个：class，主要原因就是，但你循环自己的时候，设置css样式只会生效一次，这个可以解决这个问题。

（2）.然后呢，根据数据结构，循环父组件传递过来的参数，如果没有children的话，循环下边的代码，不调用子级，如果有children的话证明有子级菜单，那么调用上边代码。

（3）.大家可以看到在label标签里我又调用了自己，然后传递参数，这里就是递归，如果满足条件就无线调用自己。

（4）.这里呢我用了自定义图标，大家可以观察我的布局。

（5）.到这里已经差不多了，但是要注意的是，:index，接受的是字符串形式的值，所以这里比较坑，需要的话可以用String（）转化一下。

（6）.至于图片里getImgUrl()方法，是解决图片异步的一种方法。

6.默认样式

很多框架的默认样式是很难修改的，大家可以在页面中去找的class类名去修改，我用的是 /deep/ 这个是一个深度修饰符 或者是 >>> ,当然也可以在跟文件里去修改样式，但是我不建议这样去做，因为会他是全局修改，容易影响其他页面的样式。

差不多就是这些了，样式的以及源码我在下边给大家附上。

父组件：

html：

<el-menu
:router="true"
:default-active="(this.$route.meta[0].meta&&this.$route.meta[0].meta[0].path&&!this.$route.meta[0].meta[0].ispath)?this.$route.meta[0].meta[0].path:this.$route.meta[0].path"
active-text-color="#ffffff"
:unique-opened="true"
background-color="#00bfb8"
>
<menutree :data="navigation" class="hr_one"></menutree>
<!-- 侧边导航组件 -->
</el-menu>
 
css：
.el-aside::-webkit-scrollbar {
width: 4px;
background: #00d2ca;
}
.el-aside::-webkit-scrollbar-thumb {
background: #009d97;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.el-main::-webkit-scrollbar {
display: none;
}
.el-aside {
text-align: center;
position: absolute;
top: 80px;
bottom: 0;
left: 0;
background-color: #00bfb8 !important;
min-height: 800px;
.el-menu-item-group /deep/.el-menu-item-group__title {
padding: 0 !important;
}
.el-menu-item:hover {
background-color: #00d2ca;
}
.child_li {
color: #ffff;
display: flex;
align-items: center;
padding: 0;
span:first-child {
margin-left: 23px;
}
span:last-child {
margin-left: 23px;
}
}
}
josn：
这个数据呢，是我自己模拟的数据
navigation: [
{
 id:0,
 name: "首页",
 path: "/Hr-index/home",
icon: "icon_hrIndex.png"
 },
 {
 id:1,
 name: "教职工档案",
path: "/Hr-index/staffFiles",
icon: "icon_staffFiles.png"
},
 {
 id:2,
 name: "招聘信息",
 path: "",
 icon: "icon_hrJion.png",
 children: [
 { id: 122, name: "招聘申请", path: "/Hr-index/zpApply" },
 { id: 123, name: "招聘审核", path: "/Hr-index/zpCheck" },
 { id: 124, name: "结果统计", path: "/Hr-index/resultInfo" }
 ]
 },
 {
 id: 10,
 name: "解聘信息",
 path: "",
 icon: "icon_hrunBind.png",
 children: [
 { id: 119, name: "解聘信息", path: "/Hr-index/decruitment" },
 { id: 121, name: "解聘教师端", path: "/Hr-index/jpteacher" }
 ]
 },
 {
 id: 3,
 name: "劳资管理",
 path: "",
 icon: "icon_hrLabour.png",
 children: [
 { id: 117, name: "劳资详情", path: "/Hr-index/labour/details" },
 {
 id: 118,
 name: "岗位劳资设定",
 path: "/Hr-index/labour/setting"
 }
 ]
 },
 {
 id: 4,
 name: "考勤管理",
 path: "/Hr-index/check/manage",
 icon: "icon_manage.png"
 },
 {
 id: "5",
 name: "培训管理",
 path: "/Hr-index/modlifyift",
 icon: "icon_modifyift.png"
 },
 {
 id: "6",
 name: "离岗创业管理",
 path: "/Hr-index/Quit",
 icon: "icon_dimission.png"
 },
 {
 id: "7",
 name: "护照管理",
 icon: "icon_Passport.png",
 path: "/Hr-index/Passport"
 },
 {
 id: "8",
 name: "权限管理",
 icon: "icon_jurisdiction_li.png",
 path: "",
 children: [
 { id: "115", name: "人员管理", path: "/Hr-index/Jurisdiction_set" },
 { id: "116", name: "角色管理", path: "/Hr-index/Jurisdiction_role" }
 ]
 },
 {
 id: "11",
 name: "院系专业管理",
 path: "/Hr-index/yxhome",
 icon: "icon_yxhome.png"
 },
 {
 id: "",
 name: "课程管理",
 path: "/Hr-index/KcAdministration",
 icon: "icon_KcAdministration.png"
 },
 {
 id: "9",
 name: "个人信息",
 icon: "icon_Personal_li.png",
 path: "",
 children: [
 {
 id: "111",
 name: "个人档案rerwerwerwerwerwerwerwerwerwerwerwerwerwerwerwer",
 path: "/Hr-index/Personal_file"
 },
 { id: "112", name: "个人考勤", path: "/Hr-index/Personal_check" },
 { id: "113", name: "劳资详情", path: "/Hr-index/Personal_labour" },
 { id: "114", name: "培训详情", path: "/Hr-index/Personal_train" }
 ]
 }
], //导航数组

　　

子组件：

html：

<div class="menutree" :class="[calssName]">
<div class>
<label v-for="menu in data" :key="menu.index">
<el-submenu :index="String(menu.id)" v-if="menu.children!=''">
<!-- <el-submenu :index="String(menu.id)" v-if="menu.children"> -->
<template slot="title">
<img :src="getImgUrl(menu.icon)" alt v-if="menu.icon" />
<span>{{menu.name}}</span>
</template>
<label>
<menutree :data="menu.children" :calssName="calssName"></menutree>
</label>
</el-submenu>
<el-menu-item :index="menu.path" v-else>
<img :src="getImgUrl(menu.icon)" alt v-if="menu.icon" />
<span
style="display:block;width:4px;height:4px;background:#ffffff;margin-top:28px;margin-left:30px; border-radius:100%;"
:style="{backgroundColor:calssName=='listtxt'?'#a6160a':'#ffffff',}"
v-else
></span>
<span
slot="title"
style="display:block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;white-space : nowrap;"
>{{menu.name}}</span>
</el-menu-item>
</label>
</div>
</div>
 
 
script：
 
import menutree from "./boss";
export default {
name: "menutree",
data() {
return {
menu_data: {},
name: "one"
};
},
components: {
menutree: menutree
},
props: ["data","calssName"],
mounted() {
// console.log(this.$route);
},
methods: {
getImgUrl(icon) {
return require("@/assets/" + icon);
}
}
};
 
 
css：
 
.menutree /deep/ .el-menu-item,
.menutree /deep/ .el-submenu__title {
color: #ffffff !important;
height: 60px;
line-height: 60px;
display: flex;
text-align: left;
padding: 0;
img {
width: 16px;
height: 16px;
float: left;
margin-top: 21px;
margin-left: 39px;
}
span {
float: left;
margin-left: 12px;
}
}
.one /deep/ .el-menu {
background: none;
}
.listtxt.menutree /deep/ .el-menu-item,.listtxt.menutree /deep/ .el-submenu__title {
color: #a6160a !important;
}
 
好啦，就到这里了，有不明白的地方可以跟我留言，我是前端菜鸡儿，嘻嘻嘻嘻。

　

vue 自定义侧边栏 递归无限子级菜单的更多相关文章

  1. C#中怎样在ToolStripMenuItem下再添加子级菜单

    场景 在右键菜单ContextMenuStrip下添加子菜单选项可以通过 ContextMenuStrip menuStrip ToolStripMenuItem mnuChartOption = n ...

  2. vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

    最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...

  3. 递归方式---通过子级id，获取子级和父级Name

    #region 递归--返回 父级|子级 名称 #region --返回 父级|子级 名称 public string RetrurnTypeNames(string TypeId) { String ...

  4. Axure案例：用中继器实现便捷好用的3级菜单--转载

    提示1:本篇教程可能不太适合新手,以及不了解中继器.全局变量.系统变量等使用的…新手 提示2:文字其实不多,截图太多,所以看上去很长,也可直接翻到末尾查看所有的用例,其实并不多 之前有介绍过使用中继器 ...

  5. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  6. vue的递归组件以及三级菜单的制作

    js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...

  7. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  8. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  9. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

随机推荐

  1. 【linux】【jenkins】自动化运维三 整合gitlab、docker发布vue项目

    由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jx ...

  2. 深入理解perf报告中的swapper进程

    一.前言 1.在perf监控进程的系统调用时,会出现大量swapper进程 2.官方描述该进程是当CPU上没有其他任务运行时,就会执行swapper.换句话说swapper意味着CPU啥事也没干,跑去 ...

  3. Linux 中文打字软件 gtypist 光标错位解决

    在windows 下有 金山打字和其他的跟打软件,在Linux下找到了 gtypist 为练习中文打字,该软件分为练习模式的速度测试模式,在gtypist-2.9.5版中会出现以下几个问题: 一是在练 ...

  4. 死磕 java同步系列之mysql分布式锁

    问题 (1)什么是分布式锁? (2)为什么需要分布式锁? (3)mysql如何实现分布式锁? (4)mysql分布式锁的优点和缺点? 简介 随着并发量的不断增加,单机的服务迟早要向多节点或者微服务进化 ...

  5. Flask基础(06)-->视图常用逻辑

    Flask基础(06)-->视图常用逻辑 返回json 重定向:url_for 自定义状态码 返回json:在使用 Flask 写一个接口时候需要给客户端返回 JSON 数据,在 Flask 中 ...

  6. Flask基础(02)-->搭建Flask项目虚拟环境

    什么是虚拟环境? 虚拟环境:其实就是一个文件夹,是python环境的复制 为什么要搭建虚拟环境? 因为一台计算机上可能要同时开发多个不同的项目,那么这些项目有可能用到同一个包的不同版本,如此一来,我们 ...

  7. 【福利】离散&C++&硬件一笔记合集

    离散 C++ 硬件

  8. SpringBoot导入jsp依赖始终报错

    先粘出我自己的pom代码: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  9. [Note] Windows 10 Python 3.6.4 安装scrapy

    直接使用pip install安装时会在安装Twisted出错,以下主要是解决Twisted的安装问题 1. 安装wheel pip install wheel 2. 安装Twisted 在Pytho ...

  10. 深圳市网络安全中心发出通告，TeamViewer已被APT41黑客攻破

    上期我们讲了东南亚赌局为什么都是福建老板了,这次来介绍下黑客组织APT41 ,这个组织在 HT界 比较出名,很早之前是匿名在地下交易所的,而在近年频繁出现在大众视野中,这不,刚刚又把我们常用的远程工具 ...