vue element 生成无线级左侧菜单的实现代码


Posted in Javascript onAugust 21, 2019

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

<template>
 <div class="menu">
  <div class="logo-con">
   <div class="title" v-show="!collapse">
    <span class="title__sider-title is-active">{{logo}}</span>
   </div>
   <div class="title" v-show="collapse">
    <span class="title__sider-title el-tag--mini">LG</span>
   </div>
  </div>
  <el-menu
   :background-color="backgroundColor"
   :text-color="textColor"
   :default-active="$route.meta.pageId"
   :collapse="collapse"
  >
   <template v-for="item in list">
    <router-link :to="item.url" :key="item.id" v-if="item.children.length===0">
     <el-menu-item :index="item.id.toString()">
      <i :class="item.icon"></i>
      <span slot="title">{{item.name}}</span>
     </el-menu-item>
    </router-link>
    <subMenu v-else :data="item" :key="item.id"></subMenu>
   </template>
  </el-menu>
 </div>
</template>

<script>
import subMenu from "./subMenu";
export default {
 name: "menuList",
 components: {
  subMenu
 },
 data() {
  return {
   collapse: false, //是否折叠
   list: [], //当行菜单数据源
   backgroundColor: "#304156", //导航菜单背景颜色
   textColor: "#BFCBD9", //导航菜单文字颜色
   logo: "LOGO" //logo
  };
 }
};
</script>

<style lang="scss" scoped>
.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;
  }
 }
}
</style>

submenu.vue

这里有个知识点functional,不懂自行百度,文档地址: https://cn.vuejs.org/v2/guide/render-function.html#search-query-sidebar

5 <!--
 * @Description: 
 * @Author: PengYH
 * @Date: 2019-08-06
 -->
<template functional>
 <el-submenu :index="props.data.id.toString()">
  <template slot="title">
   <i :class="props.data.icon"></i>
   <span>{{props.data.name}}</span>
  </template>
  <template v-for="item in props.data.children">
   <router-link :to="item.url" :key="item.id" v-if="item.children.length===0">
    <el-menu-item class="subitem" :index="item.id.toString()">
     <i :class="item.icon"></i>
     <span slot="title">{{item.name}}</span>
    </el-menu-item>
   </router-link>
   <sub-menu v-else :data="item" :key="item.id"></sub-menu>
  </template>
 </el-submenu>
</template>
<script>
export default {
 name: "submenu",
 props: {
  data: [Array, Object]
 }
};
</script>
<style lang="scss" scoped>
.el-submenu {
 .el-menu-item {
  padding: 0;
 }
}
</style>

效果图

vue element 生成无线级左侧菜单的实现代码

总结

以上所述是小编给大家介绍的vue element 生成无线级左侧菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时会及时回复大家的!

Javascript 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 #Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 #Javascript
Vue formData实现图片上传
Aug 20 #Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
vue实现axios图片上传功能
Aug 20 #Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php自定义错误处理用法实例
2015/03/20 PHP
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python探索之SocketServer详解
2017/10/28 Python
python实现感知器
2017/12/19 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
django 简单实现登录验证给你
2019/11/06 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
2014年五一劳动节社区活动总结
2014/04/14 职场文书
李培根演讲稿
2014/05/22 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
复兴之路展览观后感
2015/06/02 职场文书