你可以使用递归来遍历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属性时,我添加了一个前缀和后缀来区分隐藏和显示的属性。你可以根据需要调整这部分逻辑。

tableConfig id 1 label 公司 prop baOrgName hide true id 2 label 成本指标 prop indexContentMap hide true

原文地址: https://www.cveoy.top/t/topic/jai7 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录