位置: IT常识 - 正文

Vue2基于elementUi的多级菜单动态生成(vue+elementui)

编辑:rootadmin
前言 ElementUI官方没有提供菜单动态生成的案例的,参考ng-design上的菜单动态生成,写了一个基于ElementUi的菜单动态生成,支持多级菜单。 思路 基本思路就是循环子组件,判断menu是否有children,有就说明至少有二级菜单,需要循环子组件,将menu.children作为参 ...

推荐整理分享Vue2基于elementUi的多级菜单动态生成(vue+elementui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue element-ui,vue结合element,vue结合element,vue怎么用elementui,vue2-elm,vue结合element,vue结合element,vue2-elm,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

ElementUI官方没有提供菜单动态生成的案例的,参考ng-design上的菜单动态生成,写了一个基于ElementUi的菜单动态生成,支持多级菜单。

思路

基本思路就是循环子组件,判断menu是否有children,有就说明至少有二级菜单,需要循环子组件,将menu.children作为参数传入。没有则直接生成el-menu-item。

代码如下

首先,定义sf-menu-item组件,

Vue2基于elementUi的多级菜单动态生成(vue+elementui)

代码如下:

1 <template> 2 <fragment> 3 <el-submenu 4 v-if="menu.children.length" 5 :index="menu.index" 6 class="sf-menu-item" 7 > 8 <template slot="title"> 9 <i :class="menu.icon"></i>{{ menu.name }}10 </template>11 <!-- 有children,调用自身 -->12 <sf-menu-item13 v-for="child in menu.children"14 :key="child.index"15 :menu="child"16 ></sf-menu-item>17 </el-submenu>18 <el-menu-item v-else :index="menu.index" class="sf-menu-item">19 <i :class="menu.icon"></i>{{ menu.name }}20 </el-menu-item>21 </fragment>22 </template>

View Code

其中的fragment标签只是空白标签,需要安装插件,npm i -S vue-fragment,并在main.js中使用

在layout.vue中使用:

还是很简单的,menus我就不写了基本都会的。

后记

刚刚学习Vue一个月,写个随笔记录下,以备不时之需 。也欢迎大家留言交流。

本文链接地址:https://www.jiuchutong.com/zhishi/310751.html 转载请保留说明!

上一篇:loop万能循环标签的使用说明(循环logo)

下一篇:(WebFlux)004、WebFilter踩坑记录

  • python getattr函数(pythongetattribute方法怎么用)

    python getattr函数(pythongetattribute方法怎么用)

  • ios15左侧搜索页面怎么关掉(苹果手机左边页面的搜索有什么用)

    ios15左侧搜索页面怎么关掉(苹果手机左边页面的搜索有什么用)

  • wps图片怎么去除图片背景色(wps怎样图片转文字)

    wps图片怎么去除图片背景色(wps怎样图片转文字)

  • 美的电饭锅显示e-怎么处理(美的电饭锅显示e2是怎么回事)

    美的电饭锅显示e-怎么处理(美的电饭锅显示e2是怎么回事)

  • 华为手机桌面怎么显示步数(华为手机桌面怎么删除多余页面)

    华为手机桌面怎么显示步数(华为手机桌面怎么删除多余页面)

  • 什么是位(什么是位图)

    什么是位(什么是位图)

  • android是开发语言吗(android开发技术的基本概念)

    android是开发语言吗(android开发技术的基本概念)

  • 华为手机美颜怎样关闭(华为手机美颜怎么关)

    华为手机美颜怎样关闭(华为手机美颜怎么关)

  • 格式刷可以复制什么(格式刷可以复制艺术字样式吗)

    格式刷可以复制什么(格式刷可以复制艺术字样式吗)

  • s6有nfc功能吗(s6支不支持nfc)

    s6有nfc功能吗(s6支不支持nfc)

  • android里的data能删吗(android里面data文件可以删除吗)

    android里的data能删吗(android里面data文件可以删除吗)

  • 怎样下载抖音里面的视频(怎样下载抖音的视频)

    怎样下载抖音里面的视频(怎样下载抖音的视频)

  • oppor9是不是曲面屏(oppor9s是曲屏吗)

    oppor9是不是曲面屏(oppor9s是曲屏吗)

  • 宽带的光信号一直闪红灯是为什么(宽带的光信号一直闪红色)

    宽带的光信号一直闪红灯是为什么(宽带的光信号一直闪红色)

  • 探探可以通过手机号找人吗(探探可以通过手机号搜索好友吗)

    探探可以通过手机号找人吗(探探可以通过手机号搜索好友吗)

  • 对方拉黑了还能群聊么(对方拉黑了还能看到朋友圈吗)

    对方拉黑了还能群聊么(对方拉黑了还能看到朋友圈吗)

  • 苹果x信息有个感叹号(iphone信息有个)

    苹果x信息有个感叹号(iphone信息有个)

  • 手机助手怎么用(换机助手怎么用)

    手机助手怎么用(换机助手怎么用)

  • 手机上怎么开通qq空间(手机上怎么开通网银)

    手机上怎么开通qq空间(手机上怎么开通网银)

  • 乐视手机通讯录怎么导出

    乐视手机通讯录怎么导出

  • 淘宝服务即将恢复要多久(淘宝服务下降)

    淘宝服务即将恢复要多久(淘宝服务下降)

  • 脉脉添加30个好友加多少影响力(脉脉最多能加多少人)

    脉脉添加30个好友加多少影响力(脉脉最多能加多少人)

  • 苹果x充电器型号多少(苹果x充电器型号)

    苹果x充电器型号多少(苹果x充电器型号)

  • 扫一扫怎么改成前置(扫一扫直接变成文字)

    扫一扫怎么改成前置(扫一扫直接变成文字)

  • qq表情红包领了会不会让对方看到脸(qq的表情红包在哪里能找到)

    qq表情红包领了会不会让对方看到脸(qq的表情红包在哪里能找到)

  • 清除微信缓存会清除掉什么(清除微信缓存会影响聊天记录吗)

    清除微信缓存会清除掉什么(清除微信缓存会影响聊天记录吗)

  • 个体户无票收入对公司有影响吗
  • 资产处置损益属于收入吗
  • 工会差旅费如何做账
  • 建筑企业城建税及教育附加税率
  • 员工劳动保险赔多少钱
  • 生产经营期间固定资产报废清理的净损失
  • 捐款怎样抵扣个税
  • 公司的钱转到个人账户用途写什么
  • 收到建设方工程款怎么办
  • 土地款可以抵扣土地增值税么
  • 提前报废的固定资产怎么处理
  • 企业只有收入没有支出是否违规
  • 一般纳税人企业是什么意思
  • 水费税收分类编码
  • 增值税发票税率是星号
  • 没有成立工会的企业怎么做账
  • 价外费用如何开普票
  • 总分公司、母子公司:三流不一致情况下,如何抵扣增值税?
  • 投资收益税前扣除标准
  • 物流公司的收入来源有哪些
  • php的用处
  • wind10待机唤醒
  • msmpeng.exe是什么程序
  • Loughrigg Tarn的日出,英国英格兰湖区安布尔塞德 (© John Finney photography/Getty Images)
  • php类型转换的两种方法
  • 项目筹建期间费用计入什么科目
  • 结转代销成本
  • 出口免抵增值税是什么意思
  • 营业执照年检认缴和实缴怎么填
  • php实现简单的登录验证
  • css字体溢出
  • 购买原材料产生的费用
  • 影视行业的会计好做吗
  • ubuntu20.04安装opencv3.4
  • pythontime模块
  • 小规模纳税人开普票要交税吗
  • 应收账款坏账准备计提方法
  • 丧葬补贴金和抚恤金怎样领取
  • 客户借款怎么做账
  • 邮电局上级部门
  • 深入浅析SQL Server 触发器
  • 债务豁免会计核算
  • 使用sqlserver创建数据库和删除数据库的实验总结
  • 车保险名称
  • 残保金季度申报如何计算
  • 装修专票是几个点
  • 固定资产盘盈影响所有者权益吗
  • 电子商业汇票背书人记载不得转让
  • 房屋租赁费怎么记账
  • 股本是什么类科目怎么记
  • 小规模企业与一般纳税人企业最新划分标准及税率
  • 库存股的处理方式
  • 费用包含但不限于
  • 工程设计费收入在所得税申报表应填入
  • 水利基金和印花税会计分录
  • 支付厂房租赁费现金流
  • 公司股东为另一家公司全股
  • 公司初建账都有什么账
  • 私产公产企业产
  • mysqldump -s
  • mysql基本sql语句大全(基础用语篇)
  • mysql主从复制作用
  • RSync文件备份同步 Linux服务器rsync同步配置图文教程
  • win8截屏在哪个文件夹
  • rundll32exe应用程序错误
  • win10更新预览版
  • cpu资源占用率计算原理
  • msworks.exe - msworks是什么进程 有什么用
  • Win10手机版校
  • opengl transform
  • 游戏的背包和道具系统
  • js判断字符串字符出现的次数
  • nodejs require原理
  • Android自定义动画
  • python爬虫有道翻译
  • 螺丝钉的税率
  • 车辆购置税如何入账
  • 审计验资费计入什么科目
  • 企业所得税年报怎么填
  • 减免税备案登记表样本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设