首页 > 其他分享 >树结构数组筛选数据

树结构数组筛选数据

时间:2022-09-20 10:56:51浏览次数:61  
标签:node 树结构 id children 数组 newChildren 筛选 deptName 节点

树形结构如下:

deptData: [
                {
                    deptName: '管理部',
                    id: '1',
                    children: [
                        {
                            deptName: '一级部门',
                            id: '3',
                            children: [
                                {
                                    deptName: '综合管理部门',
                                    id: '6',
                                    children: [
                                    ]
                                },
                            ]
                        },
                        {
                            deptName: '二级部门',
                            id: '4',
                            children: [
                            ]
                        }
                    ]
                },
                {
                    deptName: '交付部',
                    id: '2',
                    children: [
                        {
                            deptName: '一级部门',
                            id: '5',
                            children: [
                            ]
                        },
                    ]
                },
            ]

筛选树形结构有两种结构,一种是带父节点,另一种是不带父节点

我面临的场景是筛选出带父节点的数据,代码参考了其它博客,忘记添加出处了,如有冒犯,还请告知

具体代码如下:

<div class="searchBox">
    <span class="searchTitle">部门名称:</span><el-input placeholder="请输入搜索内容" size="mini" v-model="postNameSeatch" clearable> </el-input>
    <span class="table_search_reset search_btn_item" @click="resetSearchValue">重置</span>
    <span class="table_search_submit search_btn_item" @click="searchDept">搜索</span>
</div>
// 重置搜索
        resetSearchValue() {
            this.postNameSeatch = ''
            this.searchDept()
        },
        // 搜索部门
        searchDept() {
            if (this.postNameSeatch == '') {
                this.deptTableData = this.allTableData
            } else {
                let newArr = this.filterTree(this.deptTableData, this.postNameSeatch)
                this.deptTableData = newArr
            }
            this.total = this.deptTableData.length
        },
        filterTree(nodes, query) {
            // 条件就是节点的deptName过滤关键字
            let predicate = function (node) {
                if (node.deptName.includes(query)) {
                    return true
                } else {
                    return false
                }
            }

            // 结束递归的条件
            if (!(nodes && nodes.length)) {
                return []
            }
            let newChildren = []
            for (let node of nodes) {
                // 一、带父节点     以下两个条件任何一个成立,当前节点都应该加入到新子节点集中
                // 1. 子孙节点中存在符合条件的,即 subs 数组中有值
                // 2. 自己本身符合条件
                let subs = this.filterTree(node.children, query)
                if (predicate(node)) {
                    newChildren.push(node)
                } else if (subs && subs.length) {
                    node.children = subs
                    newChildren.push(node)
                }

                // 二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
                // if (predicate(node)) {
                //     newChildren.push(node)
                //     node.children = this.filterTree(node.children, query)
                // } else {
                //     newChildren.push(...this.filterTree(node.children, query))
                // }
            }
            return newChildren.length ? newChildren : []
        },

 

标签:node,树结构,id,children,数组,newChildren,筛选,deptName,节点
From: https://www.cnblogs.com/wq805/p/16710237.html

相关文章

  • Java中如何数组进行反转呢?
    下文笔者将讲述java代码数组反转的方法分享,如下所示:数组是我们日常开发中常用过的一种数据结构,那么我们如何将一个数组反转操作呢?下文笔者借助栈对象的先进后出的特性,......
  • 学习-数组相关算法-两数之和
    obj[1]=111letobj={"5":222}console.log(obj[5])////222console.log(obj['5'])//222//console.log(obj.5)这样写会报错obj[1]=111console.log(JSO......
  • java中创建链表数组
    importjava.util.ArrayList;importjava.util.LinkedList;publicclassmain{publicstaticvoidmain(String[]args){LinkedListlist1=ne......
  • Java自定义类创建对象数组并赋值
    以下代码执行会报错。出错代码:publicclassTest{publicstaticvoidmain(String[]args){Person[]P1=newPerson[2];P1[0].setAge(20);......
  • ASP.NET Core 读取配置文件JSON 数据、数组
    配置访问接口publicIConfiguration_Config;public类名(IConfigurationConfig){_Config=Config;}配置文件数据示例{"AllowedHosts":"*","......
  • NumPy科学计算库学习_012_NumPy数组中的线性代数
    一、定义数组importnumpyasnpA=np.array([[4,2,3],[1,3,1]])B=np.array([[2,7],[-5,-7],[9,3]])print("【矩阵A】\n",A)print("【矩阵B】\n",B)【矩阵A】[......
  • JavaScript合并多个数组
    工作中经常会对数组进行合并,稍微总结一下常用的方法:concatJavaScript原生自带的函数,用法如下:letarr1=[3,5,7];letarr2=[4,78,79];letarr3=[];arr3=......
  • 稀疏数组
    什么是稀疏数组在使用数组的过程中,需要模拟一些场景,如果把未使用的数组也在数组中分配的化,会占用很大的资源,例如一个五子棋游戏,11x11的棋盘,0表示空,1表示白棋,2表示黑棋,......
  • 做题记录整理树状数组2 P48 [SDOI2009] HH的项链(2022/9/19)
    P48[SDOI2009]HH的项链一眼莫队然而莫队就只有32分莫队毕竟是O(n根号n)的,肯定过不了我们思考一个区间[l,r],我们发现,如果从r开始往l数,那么每种数字只有最右边的那个......
  • ArrayList和Array数组类型转换
    packagecom.Mxhlin.arrayList;importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;/***@authorMxhlin*@[email protected]*......