位置: 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踩坑记录

  • 博客推广实用的技巧和优化注意事项(博客推广工具)

    博客推广实用的技巧和优化注意事项(博客推广工具)

  • 钉钉ios系统投屏没有声音怎么设置

    钉钉ios系统投屏没有声音怎么设置

  • 联通大王卡怎么关掉日租宝(联通大王卡怎么注销)

    联通大王卡怎么关掉日租宝(联通大王卡怎么注销)

  • dxva2.dll是什么意思(dxgi.dll是什么)

    dxva2.dll是什么意思(dxgi.dll是什么)

  • 手机qq删好友后幸运字符怎么找回来(手机qq删好友后忘记qq号怎么办)

    手机qq删好友后幸运字符怎么找回来(手机qq删好友后忘记qq号怎么办)

  • iphone6支持ios13吗(苹果6支持13系统吗)

    iphone6支持ios13吗(苹果6支持13系统吗)

  • 公众号有哪些类型?(公众号的种类及解释)

    公众号有哪些类型?(公众号的种类及解释)

  • 苹果手机浏览器闪退是什么原因(苹果手机浏览器怎么恢复到最原始的状态)

    苹果手机浏览器闪退是什么原因(苹果手机浏览器怎么恢复到最原始的状态)

  • 微信刚加好友转账提示(微信刚加好友转账提示风险如何解除)

    微信刚加好友转账提示(微信刚加好友转账提示风险如何解除)

  • 微信朋友圈文字怎么显示全文不折叠(微信朋友圈文字只显示一行怎么解决)

    微信朋友圈文字怎么显示全文不折叠(微信朋友圈文字只显示一行怎么解决)

  • 华为手机怎么开声卡(华为手机怎么开启存储权限)

    华为手机怎么开声卡(华为手机怎么开启存储权限)

  • 快手极速版到账审核要多久(快手极速版到账到哪了)

    快手极速版到账审核要多久(快手极速版到账到哪了)

  • 超5类网线能走多少兆(超5类网线能走100兆吗)

    超5类网线能走多少兆(超5类网线能走100兆吗)

  • 怎么取消拼多多介入(怎么取消拼多多先用后付功能)

    怎么取消拼多多介入(怎么取消拼多多先用后付功能)

  • 拼多多好评怎么不显示(拼多多好评怎么写)

    拼多多好评怎么不显示(拼多多好评怎么写)

  • 苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

    苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

  • 怎样申请第二个抖音号(怎样申请第二个快手号教程)

    怎样申请第二个抖音号(怎样申请第二个快手号教程)

  • 华为日历怎么显示行程(华为日历怎么显示黄历宜忌)

    华为日历怎么显示行程(华为日历怎么显示黄历宜忌)

  • 三维触控是啥意思(三维触控什么意思)

    三维触控是啥意思(三维触控什么意思)

  • 图虫怎么不能设置自己的图像(图虫怎么设置不了封面)

    图虫怎么不能设置自己的图像(图虫怎么设置不了封面)

  • nove4和nova4e的区别(华为nova4和nove 4e)

    nove4和nova4e的区别(华为nova4和nove 4e)

  • qq轨迹记录在哪里(我的qq轨迹在哪看)

    qq轨迹记录在哪里(我的qq轨迹在哪看)

  • 微信拉黑的人在哪(微信拉黑的人在哪里能找到)

    微信拉黑的人在哪(微信拉黑的人在哪里能找到)

  • 苹果每年什么时候发布新品(苹果每年什么时候最便宜)

    苹果每年什么时候发布新品(苹果每年什么时候最便宜)

  • 广州二手房交易契税
  • 什么是一般业务
  • 一般纳税人增值税优惠政策2023
  • 分公司承担总公司差旅
  • 收不回来的装修钱怎么办
  • 过路费定额发票还能入账吗
  • 预缴纳税和年度汇缴
  • 天猫积分购物券可以退吗
  • 销售金银首饰消费税怎么算
  • 账务处理和税前扣除如何处理
  • 固定资产到期怎么处理
  • 营改增前未完工的老项目可以开专票吗
  • 长期股权投资的账务处理
  • 资产评估机构可以评估土地吗
  • 融资租赁咨询服务合同需要交印花税吗
  • 广告费怎么入账
  • 固定资产抵扣对账怎么算
  • 无票销售纳税后怎么处理
  • 母公司派遣员工到子公司解散补偿金
  • 携税宝可以不买吗
  • 相互调转总分公司的原料物资 是视同销售吗?
  • 小规模纳税人城镇土地使用税减免政策
  • 不计入工资薪金所得的有哪些补贴
  • 代理记账公司收费标准
  • 带销货清单的专票咋红冲
  • 如何制作macos bigsur的启动盘
  • 购买办公用品发放给各部门使用
  • win服务器安装
  • 交际应酬性支出是什么
  • 应交增值税视频讲解
  • 前端获取post请求返回数据
  • abm文件怎么打开
  • 代开专用发票缴纳增值税需要计提吗?
  • 基于Python的flask百战电商流程图
  • 房地产预售收入如何缴纳所得税
  • 持有至到期投资减值准备
  • php mysql_list_dbs()函数用法示例
  • php中的pdo
  • 药品进销差价的计算公式
  • 法人跟纳税人必须是一个人吗
  • 主营业务收入月末需要结转吗
  • 三维重建是啥意思
  • java继承的基本概念
  • php公众号开发框架
  • 税务局手续费返还政策
  • 帝国cms怎么用
  • 贷款需要考虑什么
  • 信用证支付方式,银行处理单据时主要关注( )
  • mysql的索引是什么
  • 如何准确理解nosql的含义?
  • python 列表sum
  • 房地产企业将开发产品用于职工福利
  • 坏账准备计提额怎么计算
  • 车间办公用品费用
  • 汽车车票增值税税率
  • 印花税申报时间填错造成逾期怎么办
  • 纳税人的交际应酬消费可以抵扣进项税额
  • 进出口代理的账务怎么做
  • 资产负债表可以反映的具体信息有
  • 车辆计提折旧需要结转吗
  • 其他应收款应该缴纳什么税
  • 开具红字发票后所冲销的销项税应该怎么处理?
  • 怎么把应付账款调成应收
  • 主营业务收入增长率计算公式
  • 不在同一子网的ip
  • 双启动子存在的意义
  • 双屏windows
  • win10系统预览版
  • mac系统怎么清理Adobe残留
  • win7系统的wlan在哪里?
  • win7 安装系统
  • js中的filter方法
  • 自动关机的
  • unity unity3d
  • 解决跨域的原理
  • jquery获取cookie值的方法
  • 税务局试用期
  • ca钥匙登陆不了电子税务局
  • 税务窗口岗位职责
  • 用于直接销售消费品的消费税计入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设