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 

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, core: IUseCore): IUseSearchFilter { const searchTree = (target: string, option: SearchFilterOption): void => { // 搜索主逻辑 }; return { virtualListRef, searchTree, }; } } 

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

import useSearchFilter from './composables/use-search-filter'; setup(props: TreeProps, context: SetupContext) { const userPlugins = [useSelect(), useOperate(), useMergeNodes(), useSearchFilter()]; const treeFactory = useTree(data.value, userPlugins, context); expose({ treeFactory, }); } 

const treeData = ref(generateInnerTree(tree)); 

// 内部数据结构使用扁平结构 export interface IInnerTreeNode extends ITreeNode { level: number; idType?: 'random'; parentId?: string; isLeaf?: boolean; parentChildNodeCount?: number; currentIndex?: number; loading?: boolean; // 节点是否显示加载中 childNodeCount?: number; // 该节点的子节点的数量 // 搜索过滤 isMatched?: boolean; // 搜索过滤时是否匹配该节点 childrenMatched?: boolean; // 搜索过滤时是否有子节点存在匹配 isHide?: boolean; // 过滤后是否不显示该节点 matchedText?: string; // 节点匹配的文字（需要高亮显示） } 

  isMatched?: boolean; // 搜索过滤时是否匹配该节点 childrenMatched?: boolean; // 搜索过滤时是否有子节点存在匹配 matchedText?: string; // 节点匹配的文字（需要高亮显示） 

const dealMatchedData = (target: string, matchKey: string | undefined, pattern: RegExp | undefined) => { const trimmedTarget = trim(target).toLocaleLowerCase(); for (let i = 0; i = 0 && data.value[L].parentId && !hasDealParentNode(L, i, set)) { if (set.has(data.value[L].id)) { data.value[L].childrenMatched = true; data.value[L].expanded = true; set.add(data.value[L].parentId); } L--; } // 循环结束时需要额外处理根节点一层 if (L >= 0 && !data.value[L].parentId && set.has(data.value[L].id)) { data.value[L].childrenMatched = true; data.value[L].expanded = true; } } } }; const hasDealParentNode = (pre: number, cur: number, parentIdSet: Set) => { // 当访问到同一层级前已经有匹配时前一个已经处理过父节点了，不需要继续访问 // 当访问到第一父节点的childrenMatched为true的时，不再需要向上寻找，防止重复访问 return ( (data.value[pre].parentId === data.value[cur].parentId && data.value[pre].isMatched) || (parentIdSet.has(data.value[pre].id) && data.value[pre].childrenMatched) ); }; 

  isHide?: boolean; // 过滤后是否不显示该节点 

const dealNodeHideProperty = () => { data.value.forEach((item, index) => { if (item.isMatched || item.childrenMatched) { item.isHide = false; } else { // 需要判断是否有父节点有匹配 if (!item.parentId) { item.isHide = true; return; } let L = index - 1; const set = new Set(); set.add(data.value[index].parentId); while (L >= 0 && data.value[L].parentId && !hasParentNodeMatched(L, index, set)) { if (set.has(data.value[L].id)) { set.add(data.value[L].parentId); } L--; } if (!data.value[L].parentId && !data.value[L].isMatched) { // 没有parentId, 说明已经访问到当前节点所在的根节点 item.isHide = true; } else { item.isHide = false; } } }); }; const hasParentNodeMatched = (pre: number, cur: number, parentIdSet: Set) => { return parentIdSet.has(data.value[pre].id) && data.value[pre].isMatched; }; 

const matchedContents = computed(() => { const matchItem = data.value?.matchedText || ''; const label = data.value?.label || ''; const reg = (str: string) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); const regExp = new RegExp('(' + reg(matchItem) + ')', 'gi'); return label.split(regExp); }); 

 { !data.value?.matchedText && data.value?.label } { data.value?.matchedText && matchedContents.value.map((item: string, index: number) => ( index % 2 === 0 ? item : {item} )) } 

const getFirstMatchIndex = (): number => { let index = 0; const showTreeData = getExpendedTree().value; while (index <= showTreeData.length - 1 && !showTreeData[index].isMatched) { index++; } return index >= showTreeData.length ? 0 : index; }; const scrollIndex = getFirstMatchIndex(); virtualListRef.value.scrollTo(scrollIndex); 

let L = index - 1; const set = new Set(); set.add(data.value[index].parentId); while (L >= 0 && data.value[L].parentId && !hasParentNodeMatched(L, index, set)) { if (set.has(data.value[L].id)) { set.add(data.value[L].parentId); } L--; } 

const hasDealParentNode = (pre: number, cur: number, parentIdSet: Set) => { // 当访问到同一层级前已经有匹配时前一个已经处理过父节点了，不需要继续访问 // 当访问到第一父节点的childrenMatched为true的时，不再需要向上寻找，防止重复访问 return ( (data.value[pre].parentId === data.value[cur].parentId && data.value[pre].isMatched) || (parentIdSet.has(data.value[pre].id) && data.value[pre].childrenMatched) ); }; 

const hasParentNodeMatched = (pre: number, cur: number, parentIdSet: Set) => { return parentIdSet.has(data.value[pre].id) && data.value[pre].isMatched; };