前端树形Tree数据结构使用-‍♂️各种姿势总结_前端 树形节点

01、树形结构数据

前端开发中会经常用到树形结构数据，如多级菜单、商品的多级分类等。数据库的设计和存储都是扁平结构，就会用到各种Tree树结构的转换操作，本文就尝试全面总结一下。

如下示例数据，关键字段id为唯一标识，pid为父级id，用来标识父级节点，实现任意多级树形结构。"pid": 0“0”标识为根节点，orderNum属性用于控制排序。

const data = [
{ "id": 1, "name": "用户中心", "orderNum": 1, "pid": 0 },
{ "id": 2, "name": "订单中心", "orderNum": 2, "pid": 0 },
{ "id": 3, "name": "系统管理", "orderNum": 3, "pid": 0 },
{ "id": 12, "name": "所有订单", "orderNum": 1, "pid": 2 },
{ "id": 14, "name": "待发货", "orderNum": 1.2, "pid": 2 },
{ "id": 15, "name": "订单导出", "orderNum": 2, "pid": 2 },
{ "id": 18, "name": "菜单设置", "orderNum": 1, "pid": 3 },
{ "id": 19, "name": "权限管理", "orderNum": 2, "pid": 3 },
{ "id": 21, "name": "系统权限", "orderNum": 1, "pid": 19 },
{ "id": 22, "name": "角色设置", "orderNum": 2, "pid": 19 },
];

在前端使用的时候，如树形菜单、树形列表、树形表格、下拉树形选择器等，需要把数据转换为树形结构数据，转换后的数据结效果图：

预期的树形数据结构：多了children数组存放子节点数据。

[
    { "id": 1, "name": "用户中心", "pid": 0 },
    {
        "id": 2, "name": "订单中心", "pid": 0,
        "children": [
            { "id": 12, "name": "所有订单", "pid": 2 },
            { "id": 14, "name": "待发货", "pid": 2 },
            { "id": 15, "name": "订单导出","pid": 2 }
        ]
    },
    {
        "id": 3, "name": "系统管理", "pid": 0,
        "children": [
            { "id": 18, "name": "菜单设置", "pid": 3 },
            {
                "id": 19, "name": "权限管理", "pid": 3,
                "children": [
                    { "id": 21, "name": "系统权限",  "pid": 19 },
                    { "id": 22, "name": "角色设置",  "pid": 19 }
                ]
            }
        ]
    }
]

02、列表转树-list2Tree

常用的算法有2种：

• 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/573811