欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

数组根据某个条件筛选出符合的数据,生成一个新的数组

程序员文章站 2022-07-12 14:09:35
...

前言

使用vue结构,把一个数组重新组合。

一、数组重新组合,得到符合条件的新的数组。

代码如下(示例):

      menuList :[
            {
                "icon": "el-icon-search",
                "index": "11",
                "title": "协议管理",
                "subs": [
                    {
                        "index": "/homes/agreementMaintenance",
                        "title": "协议维护",
                        "enterType": ['homes']
                    },
                    {
                        "index": "/homes/signAgreement",
                        "title": "协议签署",
                        "enterType": ['homes']
                    },
                ]
            },
            {
                "index": "/manage/businessOpenAudit",
                "title": "业务开通审核",
                "enterType": ['manage']
            },
            {
                "index": "/manage/noticeManage",
                "title": "公告管理",
                "enterType": ['manage']
            },
            {
                "index": "/manage/charts",
                "title": "图表管理",
                "enterType": ['manage']
            },
            {
                "index": "12",
                "title": "基础数据",
                "subs":[
                {
                    "index": "/manage/materielManage",
                    "title": "物料管理",
                    "enterType": ['manage']
                },
                {
                    "index": "/manage/onlinePriceCity",
                    "title": "网价城市",
                    "enterType": ['manage']
                }
                ]
            },
      ]

2.找出enteryType中存在某个字段的数据。

代码如下(示例):

detailWithMenu(menu,enterType) {
        let menuList = JSON.parse(JSON.stringify(menu));
        for (let i = 0; i < menuList.length; i++) {
            // 有子节点
            if (menuList[i].hasOwnProperty('subs')) {
                for (let j = 0; j < menuList[i].subs.length; j++) {
                    if (!menuList[i].subs[j].enterType.includes(enterType)) {
                        menuList[i].subs.splice(j, 1);
                        j--;
                    }
                }
                if (menuList[i].subs.length === 0) {
                    menuList.splice(i, 1);
                    i--;
                }
            } else {
                // 无子节点
                if (!menuList[i].enterType.includes(enterType)) {
                    menuList.splice(i, 1);
                    i--;
                }
            }
        }

3.调用方法

 this.detailWithMenu(this.menuList,'manage');

相关标签: vue