中后台管理系统项目中的总结之一二级菜单分离

125 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情juejin.cn/post/714765…

友友们,今天给大家分享一下我在做中后台管理系统时遇到的问题以及解决。

在一次从后台请求回来的数据,是包含了一级菜单和二级菜单数据的总和,需要自己进行分类处理,当时比较抓麻,不知道该怎么处理,后来问了我老公,是他引导我写出来的,下面总结一下具体的写法。 先给大家上代码,根据代码进行讲解:

微信图片_20221001223337.png

  1. reqCategorys是我的请求数据函数,结果是result,把它赋值给category。(category就是包含了一级菜单和二级菜单的总和,下面统一叫做“大菜单”)
  2. category进行筛选,返回item.parentId==='0'的元素,筛选出来的这些元素组成了一级菜单的数组(menu)。
  3. 然后遍历category这个大菜单,判断只要parentId的值!=='0',那么说明当前元素就是二级菜单项。
  4. 通过数组的find方法,对一级菜单menu进行查找,查找他本身的_id.$oid的值与数组中二级菜单的parentId的值相等的元素,并返回叫做m,那么m一定是包含了二级菜单。
  5. 给m添加children属性,因为这个属性是我们自加的,所以最开始是没有值的,所以设置为它自己本身或者[]。
  6. 然后向children里添加当前的category[i]元素,这个元素就是二级菜单元素,就可以遍历出来。
  7. 如果parented===0,那么就改变category的状态值为一级菜单menu。
  8. 否则查找menu中符合条件的元素并返回m,m是依然是一级菜单
  9. 设置subCategory的状态为m.children,subCategory是我设置的二级菜单状态。 通过以上几步,就能自己分出一级菜单和二级菜单。

因为本人是个小白,写的过程不还好,所以语言和代码都可能不够精简,欢迎大家给出点评哦!!!