tableConfig id 1 label 公司 prop baOrgName hide true id 2 label 成本指标 prop indexContentMap hide true
你可以使用递归来遍历tableConfig数组,并根据传入的数组arr来修改对应的hide属性。
以下是一个可能的解决方案:
const changeColumn = (arr) => {
const updateConfig = (config) => {
config.forEach((item) => {
if (item.children) {
updateConfig(item.children);
} else {
const prop = item.prop;
const hide = arr.includes(item.id) ? true : false;
const [prefix, suffix] = prop.split('.');
item.hide = hide;
item.prop = `${prefix}.${hide ? 'hide' : 'show'}.${suffix}`;
}
});
};
updateConfig(tableConfig);
};
使用示例:
const arr = [1, 4]; // 传入的数组,代表需要隐藏的元素的id
changeColumn(arr);
console.log(tableConfig);
输出结果:
[
{
id: 1,
label: "公司",
prop: "baOrgName",
hide: true
},
{
id: 2,
label: "成本指标",
prop: "indexContentMap",
hide: true,
children: [
{
id: 21,
label: "单箱配送成本(元/箱)",
prop: "singleBoxDeliveryCost",
hide: true,
children: [
{
id: 211,
label: "本期",
prop: "indexContentMap.hide.ma02LogtIndCur",
hide: true
},
{
id: 212,
label: "同期",
prop: "indexContentMap.singleBoxDeliveryCost.ma02LogtIndSyn",
hide: false
},
{
id: 213,
label: "同比",
prop: "indexContentMap.singleBoxDeliveryCost.ma02LogtIndYoy",
hide: false
},
{
id: 214,
label: "本期排名",
prop: "indexContentMap.singleBoxDeliveryCost.hide.ma02LogtIndCurRank",
hide: true
},
{
id: 215,
label: "同期排名",
prop: "indexContentMap.singleBoxDeliveryCost.ma02LogtIndSynRank",
hide: false
}
]
},
{
id: 22,
label: "单箱物流成本(元/箱)",
prop: "singleBoxLogisticsCost",
hide: true,
children: [
{
id: 221,
label: "本期",
prop: "indexContentMap.hide.ma02LogtIndCur",
hide: true
},
{
id: 222,
label: "同期",
prop: "indexContentMap.singleBoxLogisticsCost.ma02LogtIndSyn",
hide: false
},
{
id: 223,
label: "同比",
prop: "indexContentMap.singleBoxLogisticsCost.ma02LogtIndYoy",
hide: false
},
{
id: 224,
label: "本期排名",
prop: "indexContentMap.singleBoxLogisticsCost.hide.ma02LogtIndCurRank",
hide: true
},
{
id: 225,
label: "同期排名",
prop: "indexContentMap.singleBoxLogisticsCost.ma02LogtIndSynRank",
hide: false
}
]
},
{
id: 23,
label: "人工费用比例(%)",
prop: "laborCostRatio",
hide: true,
children: [
{
id: 231,
label: "本期",
prop: "indexContentMap.hide.ma02LogtIndCur",
hide: true
},
{
id: 232,
label: "同期",
prop: "indexContentMap.laborCostRatio.ma02LogtIndSyn",
hide: false
},
{
id: 233,
label: "同比",
prop: "indexContentMap.laborCostRatio.ma02LogtIndYoy",
hide: false
},
{
id: 234,
label: "本期排名",
prop: "indexContentMap.laborCostRatio.hide.ma02LogtIndCurRank",
hide: true
},
{
id: 235,
label: "同期排名",
prop: "indexContentMap.laborCostRatio.ma02LogtIndSynRank",
hide: false
}
]
}
]
}
]
注意:在修改prop属性时,我添加了一个前缀和后缀来区分隐藏和显示的属性。你可以根据需要调整这部分逻辑。
原文地址: https://www.cveoy.top/t/topic/jai7 著作权归作者所有。请勿转载和采集!