树形控件主要使用了 ElementUI 中的控件，ElementUI 中树的加载可以通过 load 属性一个一个懒加载，在官方的案例中有这种用法，个人非常不推荐这种用法，很麻烦。我的主要思路如下：
- 在页面加载时，我在 mounted 方法中就去获取了所有的部门数据，然后直接加载到树上（这种方式比较省事，特别是处理后面动态添加删除时很方便，小伙伴在工作中可以根据实际情况选取合适的策略）。核心代码如下：
this.getRequest("/system/basic/dep/-1").then(resp=> {
_this.treeLoading = false;
if (resp && resp.status == 200) {
_this.treeData = resp.data;
}
})
- 添加节点时，当服务端添加成功后，会返回刚刚添加的节点的 json，通过递归找到这一段 json 所在的位置，动态假如到树中。核心代码如下:
setDataToTree(treeData,pId,respData){
for(var i=0;i<treeData.length;i++) {
var td = treeData[i];
if(td.id==pId) {
treeData[i].children=treeData[i].children.concat(respData);
return;
}else{
this.setDataToTree(td.children, pId, respData);
}
}
}
这是通过递归找到添加的位置，动态添加。
- 删除节点时，当服务端返回删除成功时，一样找到删除节点的位置，动态从树中删除。核心代码如下:
deleteLocalDep(treeData,data){
for(var i=0;i<treeData.length;i++) {
var td = treeData[i];
if(td.id==data.id) {
treeData.splice(i, 1);
return;
}else{
this.deleteLocalDep(td.children, data);
}
}
}
这也是在删除成功后，通过递归找到删除的位置，动态删除数据。
- 由于我采用了一次性加载所有部门的策略，所以节点过滤这块特别容易，基本上就是官方案例了。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~