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

最新推荐文章于 2024-08-02 16:32:52 发布

JavaShark

最新推荐文章于 2024-08-02 16:32:52 发布

阅读量1.5k

点赞数

分类专栏：程序员计算机 JAVA 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/JavaShark/article/details/125872256

版权

本文手把手教你实现Tree组件的搜索过滤功能，详细介绍了搜索过滤的逻辑分析、实现原理和步骤，以及遇到的难点问题。通过匹配节点标识、处理节点及父节点、高亮显示等，实现高效搜索体验。同时，针对大数据量场景，优化了性能，确保搜索后滚动条能自动定位到第一个匹配节点。

摘要由CSDN通过智能技术生成

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

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

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

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

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

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

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 的引