郑州cms建站模板,域名注册服务器,图片网站用什么主机,长治一般做一个网站需要多少钱TreeData 数据查找 最近做需求的时候遇到了这样的一个需求#xff0c;Tree组件数据支持查找#xff0c;而且TreeData的数据层级是无限级的 开始想的事借助UI组件库#xff08;Ant-design-vue#xff09;中的Tree组件的相关方法直接实现,看了下api 发现没法实现#xff0c;…TreeData 数据查找 最近做需求的时候遇到了这样的一个需求Tree组件数据支持查找而且TreeData的数据层级是无限级的 开始想的事借助UI组件库Ant-design-vue中的Tree组件的相关方法直接实现,看了下api 发现没法实现后来想通过手动构建节点树实现这样就需要写递归组件需要重新写编辑删除逻辑本人有点懒所以就没采取最后还是在数据上动手。 先封装一个查询方法 // 获取配置。 Object.assign 从一个或多个源对象复制到目标对象
const getConfig (config: PartialTreeHelperConfig) Object.assign({}, DEFAULT_CONFIG, config);// 查询方法 通过传入比较函数找出符合规则的数据
export function filterT any(tree: T[],func: (n: T) boolean,// Partial 将 T 中的所有属性设为可选config: PartialTreeHelperConfig {},
): 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框架
