树结构数组筛选数据

树形结构如下:

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 : []
        },

 

posted @ 2022-09-20 10:44  king'sQ  阅读(332)  评论(0编辑  收藏  举报