zoukankan      html  css  js  c++  java
  • 如何处理三级或者更多级的树形菜单结构

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

    {
    "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
    ]        
  • 相关阅读:
    关于linux下如何使用svn 客户端
    vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
    echarts的一些基础笔记
    Stompjs websocket vue
    GLSL反转矩阵inverse
    【入门向】使用 MetaHook Plus 绘制 HUD
    取文件MD5 WINAPI
    BAD APPLE C++控制台程序
    查看struct或class的内存布局
    让游戏以高性能GPU(独立显卡)运行
  • 原文地址:https://www.cnblogs.com/chun321/p/10827325.html
Copyright © 2011-2022 走看看