el-tree 懒加载load方法获取数据 三层数据改成二级获取数据

首先,我先给大家说一下我们这个功能的需求. 先给大家看两张截图.  一共有3层.第一层是省，

第二层是省直部门和省下面的各个市. 第三层是是下面的各个区县. 哈尔滨市下面有一个市直部门.

其实下面还有个区县.各区县下面也有数据. 大家可以看图2

那么我们最终想要的数据结构是只有两层.意思就是省，市，我们直接在市下面去就拿本市的数据.

就像这样.在市下面直接插入市直部门的数据. 听起来很简单哈. 其实实际写起来也很简单.只是刚开始我没太明白这个需求. 我还以为市下面的数据不仅仅要市直的数据.还要各区县的数据.但是后来听说是我想多了.

现在我把这个原始代码发出来给

这个是template里面的代码.

我们可以看到这个是按照el-tree懒加载的方式来生成的数据.  然后动态添加到table表格里面的.我给大家简单说一下这段代码.

1. v-loading="loading"：通过 v-loading 指令来控制表格的加载状态，loading 是一个布尔类型的变量，当其值为 true 时，表格会显示加载状态，否则不显示。

2. :data="tableData"：通过 :data 属性绑定一个数据源 tableData，用于渲染表格的数据。

3. style="width: 100%;"：设置表格的宽度为 100%。

4. row-key="officeId"：设置表格的行的唯一标识符为 officeId，用于优化表格的渲染性能。

5. :load="load"：通过 :load 属性绑定一个方法 load，用于异步加载树形表格的数据。

6. lazy：启用懒加载模式，只有当节点展开时才会加载子节点的数据。

7. border：显示表格的边框。

8. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"：通过 :tree-props 属性配置树形表格的属性，其中 children 和 hasChildren 分别指定了数据中表示子节点和是否有子节点的字段名 

那么我们再来看看他的数据是怎么来的.看看是怎么通过接口来获取的. 在mouted里面通过threeFeeList 方法传一个parentCode：0，来获取第一层数的数据.然后把数据给tableData如下图

那么我们默认一上来默认的页面就是这个样子的. 然后在点击展示的时候通过懒加载并且调用load方法拿着父级的officeId或者说是当前点击的项的officeId获取数据.  我们看一下代码.

  

1. load(tree, treeNode, resolve)：这是一个方法 load 的定义，它接受三个参数 tree、treeNode 和 resolve。在树形表格中，当节点展开时，会调用该方法来异步加载子节点的数据。

   • tree：表示当前节点的数据对象。
   • treeNode：表示当前节点的 Element UI 的节点对象。
   • resolve：一个回调函数，用于将加载的数据传递给树形表格组件。

   在方法体内部，首先通过 threeFeeList 方法发送请求，获取到当前节点的子节点数据。然后对返回的数据进行处理，将每个子节点对象添加一个 hasChildren 属性并设置为 true。接着，通过调用 resolve 回调函数，将处理后的数据传递给树形表格组件进行渲染。最后，调用 getAllData 方法来处理表格中的所有数据。

2. getAllData(officeId, data = [])：这是一个方法 getAllData 的定义，它接受两个参数 officeId 和 data，其中 officeId 表示当前节点的 officeId 值，data 表示当前节点的子节点数据。

   在方法体内部，首先创建一个空数组 newData，用于存储处理后的数据。然后遍历传入的 data 数组，对每个元素进行判断，如果 receive 大于 0 或者 appId 不存在，则计算出新的金额 newMoney，并将当前元素的属性和新的金额添加到 newData 数组中。

   接着，通过 reIndex 数组查找是否已经存在相同的 officeId，如果不存在，则在 allData 数组中找到当前节点的位置，并在该位置后插入 newData 数组中的元素。最后，将当前节点的 officeId 添加到 reIndex 数组中，表示已经处理过该节点的数据。

总的来说，resolve(data) 是将处理后的子节点数据传递给树形表格组件进行渲染，而 getAllData() 方法则是对表格中的所有数据进行处理，根据条件筛选并计算新的金额，然后将处理后的数据插入到表格中的指定位置。这样说大家是不是就是能明白

这时我就在想.他既然是在拿当前点击的节点数据对象的officeId也就是父级的数据对象的officeId.那么我可不可以在就是他点击省以后我把所有市级数据的officeId改成他下面的市级的officeId呢？这样是不是就可以实现了.但是我首先得拿到那些市直部门的officeId。那么我该怎么拿呢。我在点击哈尔滨市的时候返回的数据有哈尔滨市直部门这项。我拿到他的officeId不就可以了吗？

那么上图中的officeId就是我们想要的。但是我们怎么通过代码拿这些数据呢好像只有让他都挨个点击我们才能拿到. 那我就只能在这个三级的页面挨个点击把他写死了. 然后把他的officeId组成一个数组拿到我们的二级页面来.  （这里本来可以让后端改一下  但是因为数据是不变的 所有我局给他写死了. 这就是一般我自己能做到的事从来不麻烦别人）

下面是一开始我写的代码.

但是我发现这样写并不行.控制台报错.说id重复导致的 我们想要的数据是能查出来的. 那么既然出现问题了. 我们就从头梳理一下.在我们刚进入页面的时候.默认展开的是省,然后我们点击省，这时候我们进入load方法.查出来市级的数据的并把他们的officeId换掉然后在渲染道表格.这里都没有问题.然后当我们再次点击哈尔滨市的时候去直接查数据的时候.也能查出来数据是没有问题的.但是渲染的时候出现了问题。我们把最终数据的officeId也换成了我们array2数组里面的值。这样显然是不对的.这样就会导致父级和子级的数据重复.所以在这里我们需要判断一下他点击的是省级查询市级的数据.还是市级查下面市直的数据. 但是我们怎么判断呢? 我把他的tree打印出来一看.发现我们可以通过areaName 来判断.点击省的时候他的值是‘黑龙江省’,市级的全都是什么什么市.那我们就可以通过这边来判断. 

 完整代码.

这样就可以达成效果拉. 这篇文章主要是告诉大家的一些思路.知道做东西的时候该从哪里下手。找到问题的关键就会很简单. 喜欢的点个赞或者留下一个关注.我们一起学习，一起进步!!!