antd树选择(TreeSelect)组件+多选框生成特定格式数据求解

这里想咨询各位一个问题关于antd树选择(TreeSelect)组件生成格式如下的数据

数据格式:

```javascript

[
  {
      title: ' 某某大学1 ' ,
      list:[
              {
                  title: ' 某某专业1 ',
                  list: [
                             .......
                        ]
              },
              .......
            ]
  },
  .......
]

当前代码

```javascript

import React, { Component } from "react";
import { Tree, TreeSelect } from "antd";
const { TreeNode } = Tree;

const valueMap = {};
// 此处为之前在antd官网中找到的关于遍历treeSelect组件选中元素的父元素的方法
function loops(list, parent) {
    return (list || []).map(({ children, value }) => {
        const node = (valueMap[value] = {
            parent,
            value
        });
        node.children = loops(children, node);
        console.log('node', node)
        return node;
    });
}

function getPath(value) {
    const path = [];
    console.log('value', value)
    if (value.length > 1) {
        for (let n = 0; n < value.length; n++) {
            let newCurrent = valueMap[value[n]];
            let newArray = [];
            while (newCurrent) {
                newArray.unshift(newCurrent.value);
                newCurrent = newCurrent.parent;
            }
            path.push(newArray)
        }
    }
    else {
        let current = valueMap[value];
        let NewArray = []
        while (current) {
            NewArray.unshift(current.value);
            current = current.parent;
        }
        path.push(NewArray)
    }
    return path;
}

export default  class TreeTry extends Component {
    constructor(props) {
        super(props);
        this.state = {
            TreeData: [
                {
                    title: 'Node1',
                    value: '0-0',
                    key: '0-0',
                    children: [
                        {
                            title: 'Child Node1',
                            value: '0-0-1',
                            key: '0-0-1',
                        },
                        {
                            title: 'Child Node2',
                            value: '0-0-2',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    title: 'Node2',
                    value: '0-1',
                    key: '0-1',
                    children: [
                        {
                            title: 'Child Node1',
                            value: '0-1-1',
                            key: '0-1-1',
                        },
                        {
                            title: 'Child Node2',
                            value: '0-1-2',
                            key: '0-1-2',
                        },
                    ],
                },
                {
                    title: 'Node3',
                    value: '0-2',
                    key: '0-2',
                    children: [
                        {
                            title: 'Child Node1',
                            value: '0-2-1',
                            key: '0-2-1',
                        },
                        {
                            title: 'Child Node2',
                            value: '0-2-2',
                            key: '0-2-2',
                        },
                        {
                            title: 'Child Node3',
                            value: '0-2-3',
                            key: '0-2-3',
                        },
                        {
                            title: 'Child Node4',
                            value: '0-2-4',
                            key: '0-2-4',
                        },
                    ],
                },
            ],
            selectedArray:[]
        }
    }

    componentDidMount(){
        console.log('loop',loops(this.state.TreeData))
    }

    TreeSelectChange = (value,label,extra) => {
        
    }

    render() {
        return (
            <TreeSelect treeData={this.state.TreeData} showSearch treeCheckable onChange={this.TreeSelectChange} style={{ width: '300px' }}/>
        )
    }
}

如图为官网方法的loops()函数整理后的TreeData数据

如图为页面组件样式

当前元素被选中后的数据是这样的

当前添加了一个函数实现了单个元素被选择时的数据转换
代码如下：

MakeData = (value) => {
        value.map((item,index) => {
            let ItemArray = [];
            if(index === 0){
                console.log('0')
                for(let n = 0;n < item.length;n++){
                    if(item[n+1]){
                       ItemArray.push({title: item[n], list:[{title: item[n+1],list:[]}]}) 
                    }
                }
            }
            else{
                console.log('!0')
                for(let m = 0;m < item.length;m++){
                    if(item[m] != ItemArray[m]){
                        console.log(ItemArray[m])
                        // ItemArray[m-1].list.push(item[m])
                    }
                    else if(item[m+1]) {
                        ItemArray.push({title: item[m],list:[{title: item[m+1],list:[]}]})
                    }
                }
            }
            console.log('ItemArray',ItemArray)
            console.log('Item',item,'index',index)
        })
    }

// 且在onchange事件方法中加入
this.MakeData([...getPath(value)])

实现结果如下：

想问一下各位对于树选择组件通过多选框选择元素生成上述数据格式的数据有什么好的建议和方法？

只要是树形数据就行 。然后可以 自定义 方法生成 树