ant design vue tree组件，后端组装treeData数据方法

时间：2021-05-21 18:15:46 阅读：323 评论：0 收藏：0 [点我收藏+]

需求描述：

ant design vue tree组件样子如下：

技术分享图片

要求后端返回数据格式如下：

技术分享图片

那么后端如何组装这些属性结构的数据呢，在此引入我工作中用的例子，某项目下包含模块数据，模块在数据库中是以单独数据存在

页面效果：

技术分享图片

数据库中模块数据：

技术分享图片

拿第一个节点举例，组装好的数据应该是这样：

就是一个节点下，有children节点，然后children节点中海油children节点。

{
    "children":[
        {
            "children":[
                {
                    "children":[
                        {
                            "children":[

                            ],
                            "created_time":"2021-04-12 19:43:34",
                            "ellipsisSeen":false,
                            "id":12,
                            "isLeaf":true,
                            "key":12,
                            "modified_time":"2021-05-21 10:30:31",
                            "parent_module_id":9,
                            "popoverVisible":false,
                            "scopedSlots":{
                                "icon":"folder",
                                "title":"custom"
                            },
                            "status":"0",
                            "title":"\u6d4b\u8bd5123",
                            "tooltipVisible":false,
                            "value":"12"
                        }
                    ],
                    "created_time":"2021-03-22 21:06:25",
                    "ellipsisSeen":false,
                    "id":9,
                    "isLeaf":false,
                    "key":9,
                    "modified_time":"2021-03-22 21:06:25",
                    "parent_module_id":5,
                    "popoverVisible":false,
                    "scopedSlots":{
                        "icon":"folder-open",
                        "title":"custom"
                    },
                    "status":"0",
                    "title":"\u6ce8\u518c\u5b50\u8282\u70b9",
                    "tooltipVisible":false,
                    "value":"9"
                }
            ],
            "created_time":"2021-03-22 17:16:41",
            "ellipsisSeen":false,
            "id":5,
            "isLeaf":false,
            "key":5,
            "modified_time":"2021-03-22 17:17:21",
            "parent_module_id":1,
            "popoverVisible":false,
            "scopedSlots":{
                "icon":"folder-open",
                "title":"custom"
            },
            "status":"0",
            "title":"\u6ce8\u518c",
            "tooltipVisible":false,
            "value":"5"
        },
        {
            "children":[

            ],
            "created_time":"2021-03-22 17:18:27",
            "ellipsisSeen":false,
            "id":8,
            "isLeaf":true,
            "key":8,
            "modified_time":"2021-05-20 18:34:57",
            "parent_module_id":1,
            "popoverVisible":false,
            "scopedSlots":{
                "icon":"folder",
                "title":"custom"
            },
            "status":"0",
            "title":"\u8d2d\u7269\u8f66",
            "tooltipVisible":false,
            "value":"8"
        }
    ],
    "created_time":"2021-03-14 14:34:23",
    "ellipsisSeen":false,
    "id":1,
    "isLeaf":false,
    "key":1,
    "modified_time":"2021-05-21 10:40:25",
    "parent_module_id":0,
    "popoverVisible":false,
    "scopedSlots":{
        "icon":"folder-open",
        "title":"custom"
    },
    "status":"0",
    "title":" \u6ce8\u518c\u4e0e\u767b\u5f55",
    "tooltipVisible":false,
    "value":"1"
}