Tree 组件搜索过滤功能实现干货_vue.js_

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 < data.value.length; i++) { const key = matchKey ? data.value[i][matchKey] : data.value[i].label; const selfMatched = pattern ? pattern.test(key) : key.toLocaleLowerCase().includes(trimmedTarget); data.value[i].isMatched = selfMatched; // 需要向前找父节点，处理父节点的childrenMatched、expand参数(子节点匹配到时，父节点需要展开) if (selfMatched) { data.value[i].matchedText = matchKey ? data.value[i].label : trimmedTarget; if (!data.value[i].parentId) { // 没有parentId表示时根节点，不需要再向前遍历 continue; } let L = i - 1; const set = new Set(); set.add(data.value[i].parentId); // 没有parentId时，表示此节点的纵向parent已访问完毕 // 没有父节点被处理过，表示时第一次向上处理当前纵向父节点 while (L >= 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 : 提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：微信小程序实现简单购物车小功能_javascript技巧_
                                                                
下一篇：vue中(el-button的五种类型,三种css格式)_vue.js_