js 数组对象树形 递归过滤

在项目开发过程中遇到,需要递归过滤的树形对象数组,

上代码:

这是我的表格头数据,我需要通过点击一个select下拉框分别显示含税、不含税、全部显示的表头,后端就一个接口默认返回所有的数据,这时候就需要前端来通过动态修改表头实现

 column: [
                    {label: '科目编码', prop: 'subjectCode', width: '142px'},
                    {label: '科目名称', prop: 'subjectName', width: '140px'},
                    {
                        label:'总成本(含税)',
                        children:[
                            { label: '目标成本', prop: 'totalTargetCostTax', width: '120px',  },
                            { label: '动态成本', prop: 'totalDynamicCostTax', width: '120px',  },
                            { label: '目标建筑单方', prop: 'totalUnilateralConstructionTax', width: '140px',  },
                            { label: '动态建筑单方', prop: 'totalDynamicConstructionTax', width: '140px',  },
                            { label: '动态可售单方', prop: 'totalDynamicSellTax', width: '140px',  },
                            
                        ]
                    },                            
                    {
                        label:'总成本(不含税)',
                        children:[
                            { label: '目标成本', prop: 'totalTargetCost', width: '120px',},
                            { label: '动态成本', prop: 'totalDynamicCost', width: '120px', },
                            { label: '目标建筑单方', prop: 'totalUnilateralConstruction', width: '140px', },
                            { label: '动态建筑单方', prop: 'totalDynamicConstruction', width: '140px', },
                            { label: '动态可售单方', prop: 'totalDynamicSell', width: '140px', },
                            
                        ]
                    },    
                ]

由于我这表格是树型结构的,我不知道有几层,所以需要用到递归,过滤需要有判读条件,当时只想到 includes方法判断有没有 ‘含税’ 或者 ‘不含税’来过滤返回相应的column数据

所以就是

  // 递归过滤
    switchDataVersonName(column, text){
      // column 是表格数据, text是判断是否是含税
// 先过滤第一层
     let newColumn = column.filter(item => !item.label.includes(text))
    // 得到新的数组,但只是第一层的过滤,需要再次循环然后 判断有children的时候 在调用一次本函数 传入 x.children,还有判断条件 newColumn.forEach(x
=> x.children && (x.children = this.switchDataVersonName(x.children, text)))
    // 最后把新数组 return 出去
return newColumn },

1、传入不含税就显示含税的 表格表头

2、传入含税就显示不含税的 表格表头

3、全部就不用这个过滤函数直接返回原来表格表头

然后就是实现了

posted @ 2022-03-18 15:48  ssdtor  阅读(2003)  评论(0编辑  收藏  举报