• 如何处理三级或者更多级的树形菜单结构


    一:后台返回的数据格式是下面这样的:

    {
    "code":5200,
    "data":{
    "permission":[
    {"code":"shoppingMall","icon":null,"jump":null,"menuId":2,"name":"shoppingMall","orderNum":2,"parentId":0,"title":"商城","type":0},
    {"code":"goodsManagement","icon":null,"jump":null,"menuId":4,"name":"goodsManagement","orderNum":1,"parentId":2,"title":"商品管理","type":1},
    {"code":"normalGoods","icon":null,"jump":null,"menuId":7,"name":"normalGoods","orderNum":1,"parentId":4,"title":"普通商品","type":1},
    {"code":"sellerGoods","icon":null,"jump":null,"menuId":8,"name":"sellerGoods","orderNum":2,"parentId":4,"title":"分销商品","type":1},
    {"code":"dropGoods","icon":null,"jump":null,"menuId":9,"name":"dropGoods","orderNum":3,"parentId":4,"title":"下架商品","type":1}], "token":""}, "message":"Success !"}

    主要是通过parentId来实现之间的父子关系

    二:处理方法

    function menu(data) {
      data.forEach((item, index) => {
        const hasIndex = data.findIndex((item2, index2) => {
          return item2.menuId === item.parentId
        })
        if (hasIndex > -1) { //如果把当前元素循环当前的menuid是别的的parentid就加一个children的属性,并把值放进来
          if (data[hasIndex].children) {
            data[hasIndex].children.push(item)
          } else {
            data[hasIndex].children = [item]
          }
          // data.splice(index, 1)
        }
      })
      var newMenu = data.filter(item => {
        return item.parentId === 0 //只返回根目录的菜单,里面已经包好了子菜单
      })
     
      return newMenu
    }

    三。处理完的格式

    [
    children:[
        {
    ....... //这里面再套children和上面结构一样
        }
    ]
    code: "shoppingMall"
    component: Object
    icon: null
    jump: null
    menuId: 2
    meta: Object
    name: "shoppingMall"
    orderNum: 2
    parentId: 0
    path: "/shoppingMall"
    title: "商城"
    type: 0
    ]        
  • 相关阅读:
    2021-4-20 日报博客
    2021-4-19 日报博客
    2021-4-17 周报博客
    java web
    java web
    java web
    java
    java
    周末总结8
    java web
  • 原文地址:https://www.cnblogs.com/chun321/p/10827325.html
Copyright © 2020-2023  润新知