ElementUI中tree控件踩坑记

vhr部门管理模块更新啦！为了让小伙伴们快速理解部门管理模块实现思路，我想经过3篇短文来给你们介绍下大体的实现思路和核心代码。

项目地址：https://github.com/lenve/vhr

1.SpringBoot+Vue先后端分离，使用SpringSecurity完美处理权限问题(一)
2.SpringBoot+Vue先后端分离，使用SpringSecurity完美处理权限问题(二)
3.SpringSecurity中密码加盐与SpringBoot中异常统一处理
4.axios请求封装和异常统一处理
5.权限管理模块中动态加载Vue组件
6.SpringBoot+Vue先后端分离，使用SpringSecurity完美处理权限问题(六)
7.vhr部门管理数据库设计与编程
8.使用MyBatis轻松实现递归查询与存储过程调用

本文主要想说说ElementUI中Tree控件。坑不深。

一句话总结，就是很好很强大。可是ElementUI中树的加载能够经过load属性一个一个懒加载，在官方的案例中有这种用法，我的很是不推荐这种用法，很麻烦，节点的动态删除和修改都很麻烦，我一开始就使用了这个，后来发现动态添加节点、删除节点、节点过滤通通都很麻烦，而后换个思路，使用data，全部问题一下就都解决了。使用data思路以下：在tree中使用data属性加载数据，后期全部涉及到节点动态添加删除的事，咱们通通只去操做data就能够了，这也符合数据驱动视图的思想。

1.在页面加载时，我在mounted方法中就去获取了全部的部门数据，而后直接加载到树上（这种方式比较省事，特别是处理后面动态添加删除时很方便，小伙伴在工做中能够根据实际状况选取合适的策略）。核心代码以下：

this.getRequest("/system/basic/dep/-1").then(resp=> {
    _this.treeLoading = false;
    if (resp && resp.status == 200) {
    _this.treeData = resp.data;
    }
})

2.添加节点时，当服务端添加成功后，会返回刚刚添加的节点的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);
    }
}
}

这是经过递归找到添加的位置，动态添加。

3.删除节点时，当服务端返回删除成功时，同样找到删除节点的位置，动态从树中删除。核心代码以下:

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);
    }
}
}

这也是在删除成功后，经过递归找到删除的位置，动态删除数据。

4.因为我采用了一次性加载全部部门的策略，因此节点过滤这块特别容易，基本上彻底参考官方案例就能实现。

其余一些琐碎的技术就不值得介绍了，你们在源码中自行研究，有问题欢迎留言讨论。

关注公众号，能够及时接收到最新文章: