Angular cli8过滤树形结构数据并保留树形结构

最新推荐文章于 2025-10-03 02:51:39 发布

原创

最新推荐文章于 2025-10-03 02:51:39 发布 · 927 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular8 #树形结构 #递归过滤

本文介绍如何在Angular8项目中对三级及以上树形结构数据进行过滤操作，同时保持数据的树形结构。核心思路是利用递归方法，当节点满足过滤条件或含有符合条件的子节点时保留该节点。

1、适用场景

实际开发中经常会遇到需要对三级甚至是无限级树型结构进行过滤并且过滤之后仍要保留树形结构的情况，此时采用递归的方式可以满足要求，不但可以完成过滤需求并保留树形结构。

2、核心思想

如果当前节点包含过滤条件据并且没有子节点则直接保留该节点；如果当前节点不包含过滤条件并且没有子节点则直接不保留该节点；如果当前节点有子节点不管当前节点是否包含过滤条件都对当前节点的子节点进行递归过滤。

3、具体实现

// 进行过滤的条件
private queryText = '521';
// 进行过滤的数据
private treeDataes = [
	{
   
   
		name: 'Item1',
		childs: null
	},
	{
   
   
		name: 'Item2',
		childs: [
			{
   
   
				name: 'Item21',
				childs: null
			}, {
   
   
				name: 'Item22',
				childs: null