TreeData 数据查找

最近做需求的时候遇到了这样的一个需求，Tree组件数据支持查找，而且TreeData的数据层级是无限级的

整体图

开始想的事借助UI组件库（Ant-design-vue）中的Tree组件的相关方法直接实现,看了下api 发现没法实现，后来想通过手动构建节点树实现，这样就需要写递归组件，需要重新写编辑，删除逻辑（本人有点懒所以就没采取），最后还是在数据上动手。

先封装一个查询方法


// 获取配置。  Object.assign 从一个或多个源对象复制到目标对象
const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);// 查询方法 通过传入比较函数，找出符合规则的数据
export function filter<T = any>(tree: T[],func: (n: T) => boolean,// Partial 将 T 中的所有属性设为可选config: Partial<TreeHelperConfig> = {},
): T[] {// 获取配置config = getConfig(config);const children = config.children as string;function listFilter(list: T[]) {return list.map((node: any) => ({ ...node })).filter((node) => {// 递归调用 对含有children项  进行再次调用自身函数 listFilternode[children] = node[children] && listFilter(node[children]);// 执行传入的回调 func 进行过滤return func(node) || (node[children] && node[children].length);});}// 返回符合结果数据return listFilter(tree);
}

方法调用

    const fieldNames = { children: 'children', title: 'name', key: 'id' };treeData.value = filter(//原始数据originalTreeData, //过滤函数(node) => {const result = node[titleField]?.includes(searchValue.value) ?? false;if (result) {expandedKeys.value.push(node[keyField]);}return result;},fieldNames,);