TreeData 数据查找

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项  进行再次调用自身函数 listFilter
        node[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,
    );

这就实现了，此种方法可以支持element、ant-design-vue、iview 等多种Ui框架