目录

 

1.需要将源数据进行处理

2. 安装使用json-tree插件

API

construct(data, config)

destruct(data, config)

3.在ts文件中进行使用

4.使用前后数据格式进行比对

---

1.首先需要将源数据进行处理，将id&parentId&children进行适配，因为不确定返回的是string还是number

Utils.handleTree = (
  data: any,
  id: string = '',
  parentId: string = '',
  children: string = '',
): void => {
  // 适配对象中可能存在的不同的三个tree的必要参数
  id = id || 'id';
  parentId = parentId || 'parentId';
  children = children || 'children';
 } 

2. 安装使用json-tree插件

npm install --save @aximario/json-tree

API

construct(data, config)

• construct会自动过滤掉null和undefined的值

• data：数组，扁平化数据

• config：配置对象

  • id：数据里的id，string类型
  • pid：数据里的父id，string类型
  • children：生成结果中子节点的字段名，string类型

• 返回一个数组对象，里面可能包含多个树结构

destruct(data, config)

• destruct会自动过滤掉null和undefined的值

• data：数组或者属性对象，结构化的数据

• config：配置对象

  • id：数据里的id，string类型，默认为'id'
  • pid：数据里添加的父id信息，string类型，默认为'pid'
  • children：生成结构中子节点的字段名，string类型，默认为'children'

• 返回一个数组对象，里面为展开的数据

3.在ts文件中进行使用

import { construct, destruct } from '@aximario/json-tree';

  // 此处使用construct为json-tree插件
 const treeData = construct(data, {
    id: 'id',
    pid: 'parentId',
    children: 'children'
  })
  console.log(treeData)
  return treeData != '' ? treeData : data;
}

4.使用前后数据格式进行比对

使用前

//后台返回json扁平化数据
"data": [
        {
            "id": 2,
            "creater": null,
            "createTime": "2021/01/26 17:16:20",
            "updater": null,
            "updateTime": "2021-01-14T03:04:36.000+0000",
            "name": "项目管理",
            "parentId": 0,
            "status": "0",
            "icon": "alert",
            "updateBy": "string",
            "remark": null,
            "key": "project_manager"
        },

        {
            "id": 21,
            "creater": null,
            "createTime": "2021/01/26 18:28:12",
            "updater": null,
            "updateTime": null,
            "name": "应用管理",
            "parentId": 2,
            "status": "1",
            "icon": "double-right",
            "updateBy": null,
            "remark": null,
            "key": "service_manager"
        },
        {
            "id": 22,
            "creater": null,
            "createTime": "2021/01/26 18:28:51",
            "updater": null,
            "updateTime": null,
            "name": "应用管理01",
            "parentId": 2,
            "status": "1",
            "icon": "down",
            "updateBy": null,
            "remark": null,
            "key": "application_service"
        },

        {
            "id": 55,
            "creater": null,
            "createTime": "2021/01/26 18:31:08",
            "updater": null,
            "updateTime": null,
            "name": "demo",
            "parentId": 2,
            "status": "1",
            "icon": "menu-unfold",
            "updateBy": null,
            "remark": null,
            "key": "a"
        }
    ],

---

使用后

---

ant-design表格展示效果

---