loadsh过滤清洗后台多层嵌套集合对象(树形结构集合对象)
关于lodash工具库的安装(作者的前端框架是Vue):https://www.jianshu.com/p/907e8a0ee5d7官方文档:lodashjs.com/docs/lodash.chain树形结构数据清洗是受下面这位仁兄的方法启发,作者只是利用lodash进行了一下处理https://blog.csdn.net/lfcss/article/details/101150165下面是 j
·
关于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
})
},
}
贴图:
更多推荐
已为社区贡献1条内容
所有评论(0)