✨antd “tree树数据格式“ 递归过滤成 “级联菜单数据“

antd tree 树结构数据 过滤成 Cascader级联选择所需数据

首先这是级联菜单所需要的数据格式 👇

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

这是我拿到手的数据格式 👇

[
    {
        "techniquesArr": [
            {
                "techniquesArr": [
                    {
                        "techniquesArr": [],
                        "id": 5,
                        "name": "子节点11",
                        "pId": 3,
                        "type": "1"
                    }
                ],
                "id": 3,
                "name": "子节点1",
                "pId": 1,
                "type": "1"
            }
        ],
        "id": 1,
        "name": "根节点1",
        "pId": 0,
        "type": "1"
    },
    {
        "techniquesArr": [
            {
                "v": [],
                "id": 4,
                "name": "子节点2",
                "pId": 2,
                "type": "1"
            }
        ],
        "id": 2,
        "name": "根节点2",
        "pId": 0,
        "type": "1"
    }
]

因为tree树结构的数据层级很深 这时候就要递归遍历去过滤出你想要的数据 👇

const arryData = (v) => {
  return v.map(item => {
    if (item.techniquesArr?.length) {
      return {
        value: item.id,
        label: item.name,
        children: arryData(item.techniquesArr)
      }
    }
    return {
      value: item.id,
      label: item.name,
    }
  })
}

这是我过滤出来的数据，也正是我想要的：

如果有帮助到你 记得 三连 感谢(抱拳了)