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与DOM组合动态创建表格实例
Dec 23 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
微信小程序仿今日头条导航栏滚动解析
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
德生H-501的评价与改造
2021/03/02 无线电
php 操作调试的方法
2012/07/12 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php无序树实现方法
2015/07/28 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python生成器generator用法示例
2018/08/10 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python中tab键是什么意思
2020/06/18 Python
python实现三种随机请求头方式
2021/01/05 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
linux面试题参考答案(11)
2012/05/01 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
品管员岗位职责
2013/11/10 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
薪资证明范本
2015/06/19 职场文书
运动会主持人开幕词
2016/03/04 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
创业计划书之餐饮
2019/09/02 职场文书