数据树筛选小计

数据树筛选小计

近期项目中遇到的一个需求，页面的树结构采用的是Ant Design中的Tree组件，初始化页面的时候一次性返回所有的数据，用户根据名称模糊查询，更新树结构的逻辑不再调用后端接口，而是前端自己筛选。

数据结构实例如下所示：

[
 {
   name: 'xxx',
   childList: [
     name: 'xxx',
     childList: [
      {
        name: 'xxx',
        childList: [],
      },
    ],
   ],
 },
 {
   name: 'xxx',
   childList: [
     {
       name: 'xxx',
       childList: [],
     }
   ],
 },
 {
   name: 'xxx',
   childList: [],
 }
]

前端算法实现

screenData(data, keyWord) {
    let returnArr = data.map(item => {
        if (item.name && item.name.indexOf(keyWord) > -1) {
            return item;
        } else if (item.childList && item.childList.length > 0) {
            let tempObj = {
                ...item,
                childList: this.screenData(item.childList, keyWord),
            };
            return tempObj.childList && tempObj.childList.length > 0 ? tempObj : false;
        } else {
            return false;
        }
    }).filter((obj) => obj);
    return returnArr;
}

实现的思路：

• 循环遍历data数组，将符合条件的元素返回到新数组中，不符合条件的元素返回false；

• 通过数组的filter()方法，将新数组中的false元素剔除。