在项目开发中,需求是只能添加二级菜单,不能添加三级菜单但是又要显示二级菜单的内容,这个时候就可以把二级菜单给禁用掉。此文章所用的技术栈是vue2
1.完成页面编写,实现层级表单(比较粗略,大家自行编写)
2.页面数据的渲染,此处的顶级目录为我自行添加一级菜单时所用,大家可以根据需求自己编写,menus就是表格数据,
3.创建getTreeList方法,递归禁选二级菜单菜单,防止三级菜单的出现,此处的navigate参数为上图拷贝this.menus而来,一般后端传来的数据会有判断是否为层级的标志性参数,可以根据这个参数来做限制,没有就跟后端打一架赢了让他加[滑稽],
4.如果判断到此菜单为二级菜单,则给这个item设上disabled=true,这样就实现了二级菜单的禁用,后续的子菜单都可以使用递归方法实现禁用
5.最后一步,递归处理过后的菜单要重新赋给原先的菜单(我这里是因为源数据绑的是menus)
到这里就结束了,此贴分享一下自己在开发时遇到的并且是csdn上目前少有分享的场景。
如果有什么问题的话可以一起交流哦!