vue导航栏部分的动态渲染实例


Posted in Javascript onNovember 01, 2019

根据公司项目的需求,使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单。

代码部分:

<el-menu class='el-menu-vertical-demo' :router='true' v-for='(item, index) in navMenu' :key='index'>
  <el-submenu v-if='item.childs' :index='item.name' :route = 'item.value' class='edit_wrapper' @mouseover.native="overShow" @mouseout.native="outHide">
  <template slot='title'>
   <i :class='item.icon'></i>
   <span slot='title'>{{item.alias}}</span>
   <i class='iconfont icon-shenpi edit' v-show='haha'></i>
  </template>
  <el-submenu v-if='item1.childs' v-for= '(item1, index) in item.childs' :key='item1.name' :index='item1.name' :route='item1.value'>
   <template slot='title'>
   <i :class='item1.icon'></i>
   <span slot='title'>{{item1.alias}}</span>
   </template>
   <el-submenu v-for= '(item2, index) in item1.childs' :key='item2.name' v-if='item2.childs' :index='item2.name' :route = 'item2.value'>
   <template slot='title'>
    <i :class='item2.icon'></i>
    <span slot='title'>{{item2.alias}}</span>
   </template>
   <el-submenu v-for= '(item3, index) in item2.childs' :key='item3.name' v-if='item3.childs' ::index='item3.name' :route = 'item3.value'>
    <template slot='title'>
    <i :class='item3.icon'></i>
    <span slot='title'>{{item3.alias}}</span>
    </template>
    <el-menu-item v-for= '(item4, index) in item3.childs' :key='item3.name' v-if='item4.childs == null' :index='item4.name' :route = 'item4.value'>
    <span>{{item4.alias}}</span>
    </el-menu-item>
   </el-submenu>
   <el-menu-item v-for= '(item3, index) in item2.childs' :key='item3.name' v-if='item3.childs == null' :index='item3.name' :route = 'item3.value'>
    <span>{{item3.alias}}</span>
   </el-menu-item>
   </el-submenu>
   <el-menu-item v-for= '(item2, index) in item1.childs' :key='item2.name' v-if='item2.childs == null' :index='item2.name' :route = 'item2.value'>
   <span>{{item2.alias}}</span>
   </el-menu-item>
  </el-submenu>
  <el-menu-item v-for= '(item1, index) in item.childs' :key='item1.name' v-if='item1.childs == null' :index='item1.name' :route = 'item1.value'>
   <span>{{item1.alias}}</span>
  </el-menu-item>
  </el-submenu>
  <el-menu-item v-if='item.childs == null' :index='item.name' :route = 'item.value'>
  <i :class='item.icon'></i>
  <span slot='title'>{{item.alias}}</span>
  </el-menu-item>
  </el-menu>

数据部分:

navMenu: [{
  name: 'serveList',
  icon: 'iconfont icon-shezhi',
  alias: '金融服务目录',
  value: '',
  childs: [
  {
  name: 'channelManage',
  icon: '',
  alias: '渠道管理',
  value: '',
  childs: [
  {
   name: 'channelManage_in',
   icon: '',
   alias: '渠道内部管理',
   value: '',
   childs: [
   {
   name: 'financial',
   icon: '',
   alias: '金融类',
   value: '/serveManage/financial',
   },
   {
   name: 'no_financial',
   icon: '',
   alias: '非金融类',
   value: '/serveManage/no_financial',
   },
   {
   name: 'query_class',
   icon: '',
   alias: '查询类',
   value: '/serveManage/query_class',
   },
   {
   name: 'square_class',
   icon: '',
   alias: '冲正类',
   value: '/serveManage/square_class',
   },
   ]
  },
  {
   name: 'process_services',
   icon: '',
   alias: '流程服务',
   value: '/serveManage/process_services'
  },
  {
   name: 'cooperation_services',
   icon: '',
   alias: '合作方服务',
   value: '/serveManage/cooperation_services'
  },
  ]
  },
  {
  name: 'saveManage',
  icon: '',
  alias: '风险管理',
  value: '/serveManage/saveManage'
  }, {
  name: 'manageDecision',
  icon: '',
  alias: '管理决策',
  value: '/serveManage/manageDecision'
  }, {
  name: 'businessSupport',
  icon: '',
  alias: '业务支持',
  value: '/serveManage/businessSupport'
  }, {
  name: 'technicalSupport',
  icon: '',
  alias: '技术支持',
  value: '/serveManage/technicalSupport'
  }
  ]
 }, {
  name: 'serveRelation',
  icon: 'iconfont icon-shezhi',
  alias: '服务血缘关系',
  value: '/serveManage/serveRelation'
 }]

注意:因为含有childs的目录是没有路由的,所以可以把它的value值设为空。

效果展示:

vue导航栏部分的动态渲染实例

这样我们就可以在其他页面引入该组件就可以了。

以上这篇vue导航栏部分的动态渲染实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
php基于redis处理session的方法
Mar 14 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
You might like
投票管理程序
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python的迭代器和生成器
2015/07/29 Python
Python实现定时任务
2017/02/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python实现播放和录制声音的功能
2020/08/12 Python
自我评价范文分享
2014/01/04 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
工作保证书范文
2014/04/29 职场文书
百日安全活动总结
2014/05/04 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
业务员岗位职责范本
2015/04/03 职场文书
感动中国何玥观后感
2015/06/02 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android