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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
JavaScript严格模式详解
Nov 18 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
中国第一家无线电行
2021/03/01 无线电
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
JavaScript计算正方形面积
2019/11/26 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
Overload和Override的区别
2012/09/02 面试题
一名女生的自荐信
2013/12/08 职场文书
入党思想汇报
2014/01/05 职场文书
产品设计开发计划书
2014/05/07 职场文书
理发店策划方案
2014/06/05 职场文书
保护水资源的标语
2014/06/17 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年安全员工作总结
2014/11/13 职场文书