1.使用函数
export function filterTree(
node: any[],
callBack = (node: any): boolean => {
return true;
},
option: {
childrenKey?: string; //子节点key 默认为children
isFilterBranchNode?: boolean; //分支节点是否需要参与过滤
} = {}
) {
if (!isArray(node)) return;
node = cloneDeep(node);
return _filterTree(node, callBack, option);
}
function _filterTree(
node: any[],
callBack = (node: any): boolean => {
return true;
},
option: {
childrenKey?: string; //子节点key 默认为children
isFilterBranchNode?: boolean; //是否过滤分支节点 默认为ture
} = {}
) {
if (!node?.length) {
return [];
}
const { childrenKey = 'children', isFilterBranchNode = true } = option;
const newNode: any[] = [];
for (let i = 0, l = node.length; i < l; i++) {
const item = node[i];
if (item?.[childrenKey]?.length) {
const newChildrenNode: any[] = _filterTree(item.children, callBack, option);
if (newChildrenNode?.length) {
item[childrenKey] = newChildrenNode;
newNode.push(item);
} else {
delete item[childrenKey];
if (isFilterBranchNode && callBack(item)) {
newNode.push(item);
}
}
} else {
if (callBack(item)) {
newNode.push(item);
}
}
}
return newNode;
}
2.如何使用
useTreeData -> 使用数组
treeData -> 接口拿回的数据
<a-input-search
v-model:value="searchValue"
allowClear
style="margin-bottom: 8px"
placeholder="搜索"
enter-button
@search="handelTreeSearch"
>
<template #prefix><SearchOutlined /></template>
</a-input-search>
const handelTreeSearch = (val: string) => {
if (!val) {
this.useTreeData = this.treeData;
return;
}
this.useTreeData = filterTree(
this.treeData,
(node: any[]) => {
return node?.name?.indexOf(val) != -1;
},
{ isFilterBranchNode: true }
);
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?