汤惠生
element中el-tree控件如何实现⾃定义懒加载以及根据筛选结果定位节点 简介
aurita
从接触vue开发，期间遇到很多问题，哪怕是在使⽤elementUI的过程中，也会发现有很多东西都需要⾃⼰摸索。element提供的组件也并不是能满⾜所有的需求，所以在使⽤的基础上我们仍然还需要⾃⼰去拓展、去研究。下⾯我将具体讲述⼀下⾃⼰在实现el-tree这个组件时遇到的问题，以及解决的⽅案。⾸先，我这是使⽤vue重构jsp页⾯，所以我都是根据现有的后端接⼝来实现的el-tree的。那么这个el-tree需要满⾜哪些需求呢，以下我将列举出来：
2.点击节点获取相关数据
4.删除节点并刷新对应树的分⽀
5.根据搜索条件点击某条数据，⾃定定位到对应树节点
6.编辑对应节点的信息
那么，关于后端需要的⽅法对应也就是：
1.根据点击的节点，获取到他下⾯的⼀级⼦节点（可认为是根据⽗节点查，PS：初始化树的根节点，通常是根据⽗节点为空或者是统⼀的某个KEY值）
2.根据点击的节点的id，查询到对应的数据。如果需要路径，则需要⾃⼰根据node来迭代，⽣成路径，主要⽤于导航定位。
3.根据当前选中的节点作为⽗节点，在其下插⼊⼦节点，并刷新对应的节点所在树的分⽀，并替换整个树的这个分⽀。刷新分⽀的⽅法尤为关键，需要后端实现根据当前选中节点的id以及⽗节点id来获取到他所在分⽀的所有⽗节点及同级节点。
4.同新增原理相同，根据id删除，再刷新分⽀，最后替换，有同级就定位到同级节点，没有同级则定位到⽗节节点。
5.根据对应id获取到对应的数据，同样需要获取到所在分⽀，因为是懒加载，如果使⽤官⽹的加lazy属性，是⽆法实现搜索定位的。
6.根据对应id更新数据，并刷新分⽀，实现替换。
总结：由上⾯列出的可以知道，实现刷新分⽀及替换是很重要的，所以这个⽅法也是核⼼⽅法。
实现过程中使⽤到的⽅法
a.el-tree所使⽤的属性 
a.初始化树
this.queryMenusTree(0)这个⽅法是⽤来查询根节点的⽅法，由于实现的是懒加载效果，且根节点的⽗级节点都是0，所以传参为0。根据parentId查询到它下⼀级的所有节点，并判断其是否有孩⼦，这步操作是为了能够加载出下拉箭头。
c.节点展开的⽅法
为了实现懒加载效果，所以只有点击节点下拉按钮，展开节点树才会加载数据。同样，这⾥存在的难点就在于如何判断这个分⽀是否发⽣数据变化，在没有变化时应该是不需要再次请求的，展开收缩树形没有变化。
d.跳转到详情页且定位到左侧树的对应节点
此处写在⽗组件中的refreshMenu⽅法是很重要的⼀个⽅法，下⾯贴出细讲。
e.刷新对应树的分⽀以及定位节点
代码⾥注释都较为详细了，就不逐⾏解释了。
故宫博物院教学设计>原因自由行为
拟合直线>碳酸镁f.新增以及删除等⽅法都会使⽤到上⾯的⽅法，只要理解了上⾯的⽅法，在新增成功后调⽤即可，主要是参数要正确。
删除的定位相对稍微难点，需要根据当前删除的节点信息获取到与它同级的节点，如果有则定位到它
同级的⼀个节点上，如果没有同级节点则定位到其⽗级节点上。
暂时只总结了个⼈遇到的⼀些问题，提供⼀下思路给那些element满⾜不了需求的⼈。如果有问题可以留⾔。写的不好之处，敬请见谅！
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议