模拟业务场景组装树形菜单形式的关联型数据结构

最新推荐文章于 2021-11-22 14:56:23 发布

前端_小柒

最新推荐文章于 2021-11-22 14:56:23 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/qq_38603437/article/details/90674894

版权

//模拟数据源一
var data_one = [{
    name: '目录一',
    menuID: 'p1',
    isContent: true
},
    {
        name: '目录二',
        menuID: 'p2',
        isContent: true
    },
    {
        name: '目录一--菜单一',
        menuID: 'p3',
        isContent: true
    },
    {
        name: '目录一--目录一',
        menuID: 'p4',
        isContent: false
    },
    {
        name: '目录一--目录一--菜单一',
        menuID: 'p5',
        isContent: false
    },
    {
        name: '目录二--菜单一',
        menuID: 'p6',
        isContent: false
    },
    {
        name: '目录二--菜单二',
        menuID: 'p7',
        isContent: false
    }
];

//模拟数据源二
let data_two = [{
    pID: 'p1',
    name: '目录一',
    menuID: 'm1',
    isContent: false
},
    {
        pID: 'p1',
        name: '目录二',
        menuID: 'm2',
        isContent: false
    },
    {
        pID: 'p2',
        name: '目录一--菜单一',
        menuID: 'm11',
        isContent: false
    },
    {
        pID: 'p2',
        name: '目录一--目录一',
        menuID: 'm12',
        isContent: false
    },
    {
        pID: 'p2',
        name: '目录一--目录一--菜单一',
        menuID: 'm121',
        isContent: false
    },
    {
        pID: 'p3',
        name: '目录二--菜单一',
        menuID: 'm21',
        isContent: false

    },
    {
        pID: 'p3',
        name: '目录二--菜单二',
        menuID: 'm22',
        isContent: false

    },
];

console.log(tree(data_one))

/**
 * tree
 * @method 组装当前数据结构的子数据信息
 * @param treeArr 父级数据结构
 */
function tree(treeArr){
   return treeArr.map((item, index)=> {
        //如果当前元素存在子数据信息
        if(item.isContent){
            //获取当前元素的id
            //根据元素id查找与元素id相关的数据信息
            item.list=childrenArr(item.menuID,data_two)
        }
        return item
    });
}

/**
 * tree
 * @method 读取与id相关的子数据结构
 * @param pid 父级pid
 * @param arr 数据源
 */
function childrenArr(pid,arr) {
   return arr.filter((item,index)=>{ //遍历数据源
       return item.pID===pid;
    })
}

elementUI生成树形菜单的原文地址 https://www.cnblogs.com/YuKiee/p/8888538.html