vue2使用递归算法,禁用el-cascader第二级菜单选项

在项目开发中,需求是只能添加二级菜单,不能添加三级菜单但是又要显示二级菜单的内容,这个时候就可以把二级菜单给禁用掉。此文章所用的技术栈是vue2

1.完成页面编写,实现层级表单(比较粗略,大家自行编写)

2.页面数据的渲染,此处的顶级目录为我自行添加一级菜单时所用,大家可以根据需求自己编写,menus就是表格数据,

3.创建getTreeList方法,递归禁选二级菜单菜单,防止三级菜单的出现,此处的navigate参数为上图拷贝this.menus而来,一般后端传来的数据会有判断是否为层级的标志性参数,可以根据这个参数来做限制,没有就跟后端打一架赢了让他加[滑稽],

4.如果判断到此菜单为二级菜单,则给这个item设上disabled=true,这样就实现了二级菜单的禁用,后续的子菜单都可以使用递归方法实现禁用

5.最后一步,递归处理过后的菜单要重新赋给原先的菜单(我这里是因为源数据绑的是menus)

到这里就结束了,此贴分享一下自己在开发时遇到的并且是csdn上目前少有分享的场景。

如果有什么问题的话可以一起交流哦!
 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值