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,
}
})
}
这是我过滤出来的数据,也正是我想要的:
如果有帮助到你 记得 三连 感谢(抱拳了)