手把手教你实现 Tree 组件搜索过滤功能

1 Tree 组件搜索过滤功能简介

树节点的搜索功能主要是为了方便用户能够快速查找到自己需要的节点。过滤功能不仅要满足搜索的特性，同时还需要隐藏掉与匹配节点同层级的其它未能匹配的节点。

搜索功能主要包括以下功能：

1. 与搜索过滤字段匹配的节点需要进行标识，和普通节点进行区分
2. 子节点匹配时，其所有父节点需要展开，方便用户查看层级关系
3. 对于大数据量，采用虚拟滚动时，搜索过滤完成后滚动条需滚动至第一个匹配节点的位置

搜索会将匹配到的节点高亮：

过滤除了将匹配到的节点高亮之外，还会将不匹配的节点筛除掉：

2 组件交互逻辑分析

2.1 对于匹配节点的标识如何呈现？

通过将节点与搜索字段相匹配的 label 部分文字进行高亮加粗的方式进行标记。易于用户一眼就能够找到搜索到的节点。

2.2 用户如何调用 tree 组件的搜索过滤功能？

通过添加 searchTree 方法，用户通过ref的方式进行调用。并通过 option 参数配置区分搜索、过滤。

2.3 对于匹配的节点其父节点及兄弟节点如何获取及处理？

对于节点的获取及处理是搜索过滤功能的核心。尤其在大数据量的情况下，带来的性能消耗如何优化，将在实现原理中详情阐述。

3 实现原理和步骤

3.1 第一步：需要熟悉 tree 组件整个代码及逻辑组织方式

tree 组件的文件结构：

tree
├── index.ts
├── src
|  ├── components
|  |  ├── tree-node.tsx
|  |  ├── ...
|  ├── composables
|  |  ├── use-check.ts
|  |  ├── use-core.ts
|  |  ├── use-disable.ts
|  |  ├── use-merge-nodes.ts
|  |  ├── use-operate.ts
|  |  ├── use-select.ts
|  |  ├── use-toggle.ts
|  |  ├── ...
|  ├── tree.scss
|  ├── tree.tsx
└── __tests__
   └── tree.spec.ts

可以看出，vue3.0中 composition-api 带来的便利。逻辑层之间的分离，方便代码组织及后续问题的定位。能够让开发者只专心于自己的特性，非常有利于后期维护。

添加文件 use-search-filter.ts , 文件中定义 searchTree 方法。

import { Ref, ref } from 'vue';
import { trim } from 'lodash';
import { IInnerTreeNode, IUseCore, IUseSearchFilter, SearchFilterOption } from './use-tree-types';

export default function () {
  return function useSearchFilter(data: Ref<IInnerTreeNode[]>, core: IUseCore): IUseSearchFilter {
    const searchTree = (target: string, option: SearchFilterOption): void => {
      // 搜索主逻辑
    };

    return {
      virtualListRef,
      searchTree,
    };
  }
}

SearchFilterOption 的接口定义， matchKey 与 pattern 的配置增添了搜索的匹配方式多样性。

export interface SearchFilterOption {
  isFilter: boolean; // 是否是过滤节点
  matchKey?: string; // node节点中匹配搜索过滤的字段名
  pattern?: RegExp; // 搜索过滤时匹配的正则表达式
}

在 tree.tsx 主文件中添加文件 use-search-fliter.ts