树结构数组筛选数据
树形结构如下:
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 : [] },