ElementUI中tree控件踩坑记

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

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

本文主要想说说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.由于我采用了一次性加载所有部门的策略,所以节点过滤这块特别容易,基本上完全参考官方案例就能实现。

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

原文发布于微信公众号 - 玩转JavaEE(gh_d1ca11234a30)

原文发表时间:2018-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

40+个对初学者非常有用的PHP技巧(二)

考虑使用ob_gzhandler?不,别这样做。它没有任何意义。PHP应该是来写应用程序的。不要担心PHP中有关如何优化在服务器和浏览器之间传输的数据。

10210
来自专栏北京马哥教育

【翻译】Python async/await Tutorial

原文链接: http://stackabuse.com/python-async-await-tutorial/ 过去几年,异步编程方式被越来越多的程序员使用,...

33050
来自专栏IT大咖说

饿了么资深Android工程师带你领略Kotlin协程的力量

内容来源:2018 年 6 月 28 日,饿了么资深Android工程师张涛在“droidcon上海2018安卓技术大会”进行《领略kotlin协程的力量》演讲...

64840
来自专栏海说

6、Java包的命名与划分

包的命名与划分 (一)使用Java包的目的 在了解做一件事之前,需要了解做这件事的目的。而使用Java包的目的大概如下: 1    对类进行归类,便于开发查找。...

32600
来自专栏Golang语言社区

深入Go语言网络库的基础实现

Go语言的出现,让我见到了一门语言把网络编程这件事情给做“正确”了,当然,除了Go语言以外,还有很多语言也把这件事情做”正确”了。我一直坚持着这样的理念——要做...

29270
来自专栏Java进阶架构师

手把手带你实现JDK动态代理

业务接口Interface、业务实现类target、业务处理类Handler、JVM在内存中生成的动态代理类$Proxy0

8420
来自专栏马洪彪

spss C# 二次开发 学习笔记(六)——Spss统计结果的输出

Spss的二次开发可以很简单,实例化一个对象,然后启用服务,接着提交命令,最后停止服务。 其中重点为提交命令,针对各种统计功能需求,以及被统计分析的数据内容等,...

35950
来自专栏Java技术分享

30天轻松掌握JavaWeb-学习目录

17.使用beanUtils操纵javabean

27760
来自专栏漫漫深度学习路

tensorflow学习笔记(四十一):control dependencies

tf.control_dependencies()设计是用来控制计算流图的,给图中的某些计算指定顺序。比如:我们想要获取参数更新后的值,那么我们可以这么组织我们...

60790
来自专栏程序员的知识天地

维护Python代码的5种工具

随着软件项目进入“维护模式”,对可读性和编码标准的要求很容易落空(甚至从一开始就没有建立过那些标准)。然而,在代码库中保持一致的代码风格和测试标准能够显著减轻维...

33720

扫码关注云+社区

领取腾讯云代金券