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,);
这就实现了,此种方法可以支持element、ant-design-vue、iview 等多种Ui框架