准备源数据如下
{
"msg": "操作成功",
"code": 200,
"data": [
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 100,
"parentId": 0,
"ancestors": "0",
"deptName": "中旭科技",
"orderNum": "0",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 101,
"parentId": 100,
"ancestors": "0,100",
"deptName": "深圳总公司",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 102,
"parentId": 100,
"ancestors": "0,100",
"deptName": "长沙分公司",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 103,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "研发部门",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 104,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "市场部门",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 105,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "深圳部门",
"orderNum": "3",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 106,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "财务部门",
"orderNum": "4",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 107,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "运维部门",
"orderNum": "5",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 108,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "市场部门",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 109,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "财务部门",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [ ]
}
]
}
构建树结构数据方法如下
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
调用如下
listDept().then(response => { //从后台获取到数据
this.deptList = this.handleTree(response.data, "deptId");
});
构建之后数据结构如下
[
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 100,
"parentId": 0,
"ancestors": "0",
"deptName": "中旭科技",
"orderNum": "0",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 101,
"parentId": 100,
"ancestors": "0,100",
"deptName": "深圳总公司",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 103,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "研发部门",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 104,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "市场部门",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 105,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "深圳部门",
"orderNum": "3",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 106,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "财务部门",
"orderNum": "4",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 107,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "运维部门",
"orderNum": "5",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
}
]
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:21",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 102,
"parentId": 100,
"ancestors": "0,100",
"deptName": "长沙分公司",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": [
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 108,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "市场部门",
"orderNum": "1",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2021-05-27 14:08:22",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": { },
"deptId": 109,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "财务部门",
"orderNum": "2",
"leader": "中旭",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null
}
]
}
]
}
]