在项目开发过程中遇到,需要递归过滤的树形对象数组,
上代码:
这是我的表格头数据,我需要通过点击一个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、全部就不用这个过滤函数直接返回原来表格表头
然后就是实现了