ElementUI中tree控件踩坑记
时间:2022-05-06
本文章向大家介绍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.由于我采用了一次性加载所有部门的策略,所以节点过滤这块特别容易,基本上完全参考官方案例就能实现。
其他一些琐碎的技术就不值得介绍了,大家在源码中自行研究,有问题欢迎留言讨论。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法