如果获取的数据具有上下级关系,可以在前后端进行数据处理。这里我通过前端编写一个方法将普通数组转换为父子级的数据。
1. 编写转换方法,父子级数据主要通过id和父级id进行体现
transformTozTreeFormat: function (sNodes) {
var i, l;
var r = [];
var tmpMap = {};
for (i = 0, l = sNodes.length; i < l; i++) {
tmpMap[sNodes[i].id] = sNodes[i];
}
for (i = 0, l = sNodes.length; i < l; i++) {
var p = tmpMap[sNodes[i].pid];
if (p && sNodes[i].id != sNodes[i].pid) {
var children = this.nodeChildren(p);
if (!children) {
children = this.nodeChildren(p, []);
}
children.push(sNodes[i]);
} else {
r.push(sNodes[i]);
}
}
return r;
}
最后把返回的数据调用该方法进行处理即可。
getDeptList() {
list().then(res => {
console.log(res)
if (res.status === 200) {
this.departData = res.data.data
console.log(this.departData)
// 将普通数组转化为父子结构的树形
this.depts = commonApi.transformTozTreeFormat(res.data.data.departmentList)
console.log(this.depts)
}
})
}