js 迭代器过滤树状数据，保留父级

最新推荐文章于 2024-03-02 16:14:23 发布

Aiyex

最新推荐文章于 2024-03-02 16:14:23 发布

阅读量530

点赞数 1

分类专栏： html 代码 js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Ares_aggs/article/details/128493842

版权

html 代码同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

模糊搜索查询树状子级或者父级结果都保留父级
效果图

全部列表

搜索父级

搜索子级

代码

// 过滤 核心代码
// 第一个参数 列表  第二个参数 查询的字段
deepFilter (list,name) {
                return list.filter(item => {
                    let f= false;
                    if (item.children) {
                        item.children = this.deepFilter(item.children)
                        if (item.children.length>0){
                             f =true;
                        }
                    }
                    //.name 是筛选对象的字段
                    return item.name.indexOf(name) !== -1 || f;
                })
            },


// 数据结构
                data: [
                    {
                        "id": "1",
                        "name": "农业",
                        "pid": "0",
                        "type": 0,
                        "typestr": "一级",
                        "createTime": "2022-12-23 10:35:08",
                        "updateTime": "2022-12-23 10:35:08",
                        "children": [
                            {
                                "id": "4",
                                "name": "种植业",
                                "pid": "1", "type": 1, "typestr": "二级",
                                "createTime": "2022-12-29 17:13:04", "updateTime": "2022-12-29 17:13:04"
                            }, {
                                "id": "5",
                                "name": "林业",
                                "pid": "1",
                                "type": 1,
                                "typestr": "二级",
                                "createTime": "2022-12-29 17:13:09",
                                "updateTime": "2022-12-29 17:13:09"
                            }, {
                                "id": "6",
                                "name": "畜牧业",
                                "pid": "1",
                                "type": 1,
                                "typestr": "二级",
                                "createTime": "2022-12-29 17:13:19",
                                "updateTime": "2022-12-29 17:13:19"
                            }, {
                                "id": "7",
                                "name": "水产养殖业",
                                "pid": "1",
                                "type": 1,
                                "typestr": "二级",
                                "createTime": "2022-12-29 17:13:27",
                                "updateTime": "2022-12-29 17:13:27"
                            }]
                    }, {
                        "id": "2",
                        "name": "工业",
                        "pid": "0",
                        "type": 0,
                        "typestr": "一级",
                        "createTime": "2022-12-23 10:35:13",
                        "updateTime": "2022-12-23 10:35:13",
                        "children": [{
                            "id": "8",
                            "name": "制造业",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:13:38",
                            "updateTime": "2022-12-29 17:13:38"
                        }, {
                            "id": "9",
                            "name": "采矿",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:13:45",
                            "updateTime": "2022-12-29 17:13:45"
                        }, {
                            "id": "10",
                            "name": "电力",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:13:50",
                            "updateTime": "2022-12-29 17:13:50"
                        }, {
                            "id": "11",
                            "name": "自来水",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:13:55",
                            "updateTime": "2022-12-29 17:13:55"
                        }, {
                            "id": "12",
                            "name": "蒸气",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:14:03",
                            "updateTime": "2022-12-29 17:14:03"
                        }, {
                            "id": "13",
                            "name": "热水",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:14:11",
                            "updateTime": "2022-12-29 17:14:11"
                        }, {
                            "id": "14",
                            "name": "煤气",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:14:17",
                            "updateTime": "2022-12-29 17:14:17"
                        }, {
                            "id": "15",
                            "name": "建筑业",
                            "pid": "2",
                            "type": 1,
                            "typestr": "二级",
                            "createTime": "2022-12-29 17:14:27",
                            "updateTime": "2022-12-29 17:14:27"
                        }]
                    }]