关于lodash工具库的安装(作者的前端框架是Vue):
https://www.jianshu.com/p/907e8a0ee5d7
官方文档:
lodashjs.com/docs/lodash.chain
树形结构数据清洗是受下面这位仁兄的方法启发,作者只是利用lodash进行了一下处理
https://blog.csdn.net/lfcss/article/details/101150165
下面是 js代码片

// An highlighted block
method: {
       // 获取菜单列表
    getMenuList () {
      //  这里是后台传过来的数据,后台老哥没怎么处理
      let menuData = [
        {
          "id": 1,
          "parent_id": 0,
          "name": "销售",
          "module": "admin",
          "list": [
            {
              "id": 3,
              "parent_id": 1,
              "name": "公海",
              "list": [
                {
                  "id": 4,
                  "parent_id": 3,
                  "name": "公海客户",
                }
              ]
            },
            {
              "id": 21,
              "parent_id": 1,
              "name": "我的客户",
            },
            {
              "id": 22,
              "parent_id": 1,
              "name": "部门客户",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
        },
        {
          "id": 5,
          "parent_id": 0,
          "name": "网盘",
          "list": [
            {
              "id": 19,
              "parent_id": 5,
              "name": "网盘客户",
            },
            {
              "id": 20,
              "parent_id": 5,
              "name": "123456",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 23,
          "parent_id": 0,
          "name": "网销",
          "list": [
            {
              "id": 24,
              "parent_id": 23,
              "name": "我的客户",
            },
            {
              "id": 25,
              "parent_id": 23,
              "name": "部门客户",
            }
          ],
          "node_list": [
            "网络销售我的客户"
          ],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 26,
          "parent_id": 0,
          "name": "财务",
          "list": [
            {
              "id": 27,
              "parent_id": 26,
              "name": "财务报表",
            },
            {
              "id": 46,
              "parent_id": 26,
              "name": "销售提成",
            },
            {
              "id": 49,
              "parent_id": 26,
              "name": "财务发票",
            },
            {
              "id": 51,
              "parent_id": 26,
              "name": "采购审批",
            },
            {
              "id": 52,
              "parent_id": 26,
              "name": "付款审批",
            },
            {
              "id": 53,
              "parent_id": 26,
              "name": "报销审批",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 30,
          "parent_id": 0,
          "name": "签到",
          "list": [
            {
              "id": 31,
              "parent_id": 30,
              "name": "签到列表",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 34,
          "parent_id": 0,
          "name": "公告",
          "list": [
            {
              "id": 35,
              "parent_id": 34,
              "name": "公告列表",
            }
          ],
          "node_list": [
            "添加"
          ],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 36,
          "parent_id": 0,
          "name": "项目",
          "list": [
            {
              "id": 37,
              "parent_id": 36,
              "name": "项目列表",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        },
        {
          "id": 38,
          "parent_id": 0,
          "name": "审批",
          "list": [
            {
              "id": 39,
              "parent_id": 38,
              "name": "请假",
            },
            {
              "id": 43,
              "parent_id": 38,
              "name": "补签申请",
            },
            {
              "id": 44,
              "parent_id": 38,
              "name": "换班申请",
            },
            {
              "id": 45,
              "parent_id": 38,
              "name": "收款申请",
            },
            {
              "id": 63,
              "parent_id": 38,
              "name": "工作总结",
            }
          ],
          "node_list": [],
          "auth_menu1": "1,5,50,61",
          "auth_menu2": "3,19,62",
          "auth_menu3": "4",
          "auth_node": "1,2"
        }
      ];
      console.log(menuData, '=============清洗前数据')
      /**
       * 菜单权限:menu[0].auth_menu1 一级菜单 ,menu[0].auth_menu2 二级菜单, menu[0].auth_menu3 三级菜单
       **/
      // id是唯一的所以直接拆分成数字数组
      let menuIds = (menuData[0].auth_menu1 + "," + menuData[0].auth_menu2 + "," + menuData[0].auth_menu3).split(",").map(Number)
      // 调用过滤方法
      let resultMenu = this.filterMenu(menuData,menuIds)
      console.log(resultMenu, '===============清洗后数据')
    },
    // 过滤方法
    filterMenu (menuData, menuIds) {
      let newArr = this.$_.filter(menuData, (item) => {
            return this.$_.includes(menuIds, item.id)
          })
      return newArr.map( item => {
        if (item.list) {
          item.list = this.filterMenu(item.list, menuIds)
        }
        return item
      })
    },
}

贴图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐