vue侧边栏动态生成下级菜单的方法

循环传入的数据去生成下级菜单

<template>
 <div class="headBar">
 <div class="title">
  微商城管理后台
 </div>
 <el-menu
  class="el-menu-headBar"
  mode="horizontal"
  @select="handleSelect"
  background-color="#000000"
  text-color="#fff"
  active-text-color="#ffd04b"
  :unique-opened="true"
  :default-active="onRoutes" router>
  <template v-for="item in items" >
  <template v-if="item.subs" >
   <el-submenu :index="item.index">
   <template slot="title" >
    {{item.title}}
   </template>
   <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
    {{ subItem.title }}
   </el-menu-item>
   </el-submenu>
  </template>
  <template v-else>
   <el-menu-item :index="item.index">
   <label>{{ item.title }}</label>
   </el-menu-item>
  </template>
  </template>
 </el-menu>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  activeIndex: "1",
  items: [
   {
   icon: 'el-icon-menu',
   index: '1',
   title: '数据统计',
   subs: [
    {
    index: '/monitor',
    title: '客流展示'
    },
    {
    index: '/monitor/device',
    title: '设备采集'
    },
    {
    index: '/monitor/tv',
    title: '监控视频'
    }
   ]
   },{
   icon: 'el-icon-goods',
   index: '/product',
   title: '商品管理',
   },{
   icon: 'el-icon-goods',
   index: '/category',
   title: '类目管理',
   },{
   icon: 'fa fa-cart-arrow-down',
   index: '/order',
   title: '订单一览'
   },{
   icon: 'fa fa-user-o',
   index: '/merchant',
   title: '商家信息'
   },{
   icon: 'el-icon-printer',
   index: '9',
   title: '微商城',
   subs:[
    {
    icon: 'el-icon-printer',
    index: '/banner',
    title: 'banner设置'
    },{
    icon: 'el-icon-printer',
    index: '/decoration',
    title: '首页装修'
    },{
    icon: 'el-icon-printer',
    index: '/message',
    title: '消息设置'
    }
   ]
   },{
   icon: 'el-icon-printer',
   index: '10',
   title: '线下店',
   subs:[
    {
    icon: 'el-icon-printer',
    index: '/device',
    title: '设备管理'
    },{
    icon: 'el-icon-printer',
    index: '/advertise',
    title: '广告管理'
    },{
    icon: 'el-icon-printer',
    index: '/version',
    title: '版本管理'
    }
   ]
   },{
   icon: 'el-icon-printer',
   index: '/largeUI',
   title: '大屏'
   },{
   icon: 'el-icon-printer',
   index: '/coupon',
   title: '优惠券'
   }
  ],
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  console.log(key, keyPath);
  }
 },
 computed:{
  onRoutes(){
  return this.$route.path.replace('/','');
  }
 }
 }
</script>

<style scoped>
 .el-menu-headBar {
 width: 80%;
 min-width: 950px;
 font-size: 12px;
 border-bottom: 1px #000000;
 }

 .headBar {
 width: 100%;
 height: 50px;
 display: flex;
 background-color: #000000;
 }

 .title {
 background-color: #ffdb15;
 color: #000;
 height: 100%;
 min-width: 200px;
 width: 200px;
 display: flex;
 justify-content: center;
 align-items: center;
 letter-spacing: 5px;
 font-size: 17px;
 }
</style>

以上这篇vue侧边栏动态生成下级菜单的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue二级菜单导航点击选中事件的方法

    因为没有使用vue做一个真正完整的项目,所以乘着这个项目比较闲的时间,对标项目用vue做一些页面,丰富自己的项目经验.所以接下来基本都是一些简单的功能. 目标:一级导航点击收缩展开,二级导航点击选中 源码 主要是思路,具体的就不放了 <ul class="sidebar-menu"> <li class="treeNav" v-for="(item,index) in configNav"> <a href=&quo

  • Vue iview-admin框架二级菜单改为三级菜单的方法

    最近在用 iview-admin的Vue后台模板,从git上下载后发现左侧导航栏最多支持到二级菜单,也发现很多童鞋在问如何实现三级菜单.在实际的应用场景中还是会出现三级菜单的需求的,木有其他好办法,只能自己手动改代码了. 1. 第一步:首先改写VUE中的模板,修改sidebarMenu.vue文件,文件具体目录建下图: 将Menu导航菜单组件的的二级嵌套结构改为三级嵌套,无非就是判断二级路由页面下是否有children属性及是否含有子元素,有的话直接v-for循环生成子元素标签,新结构如下: <

  • Vue2组件tree实现无限级树形菜单

    一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst

  • vue.js实现二级菜单效果

    本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下 主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

  • vue2.0使用v-for循环制作多级嵌套菜单栏

    使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了. 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id

  • Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • vue单个组件实现无限层级多选菜单功能

    wTree.vue  原理:每一个多选框都是一个节点,每个节点就是一个wTree组件,有父级(顶级level为0),有子级(底层list[]是空的),组件之间状态传递是通过组件通信传递,对于外部数据checkList数组的修改是通过store实现的.初始化从底层状态传递到上层,一层一层传递.改变状态,不同状态改变,修改checklist数组.大概就这个思路,下面是代码: <template> <div> <div > <span v-for="o in

  • vue多级多选菜单组件开发

    本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下 要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选:反之,没达到全选时,父标题栏的勾选图标自动取消勾选 当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选:反之,没达到全选时,最底下那个全选框自动取消勾选 点击最底下那个全选框可以全选或取消全部的勾选图标 所以总结起来我们重点要利

  • 利用vue-router实现二级菜单内容转换

    二级菜单导航是一种很普遍的功能,一般网页都会有这个功能.如果是平常的做法就是改变url,跳到相应的页面:还有一种就是frame. 如果用vue的话,可以用vue-router改变<router-view>里面的组件,这样就能做到不刷新页面都能跳到相应"页面".其实url地址还是变了,但是他没有刷新页面其他位置的内容,只是改变了<router-view>里面的组件,渲染了新的组件. 在线demo:http://runjs.cn/code/9th3cgxo html

随机推荐