先晒出成果图：

首先还是说一下步骤：

一、先画出静态效果（用静态数据填充页面）

二、看静态数据的结构特征，后台造出和这个一样的数据结构

三、将静态数据变成动态请求，将请求的结果替换静态数据

 

一、先画出静态效果（用静态数据填充页面）

Elementplus官网是这样写静态页面的，

 

 

Data是数据源，所以，接下来要重点关注这个data的数据结构

 

 

二、看静态数据的结构特征，后台造出和这个一样的数据结构

 

Data数据结构如下，id是唯一标识，如果唯一标识不叫id，就要在node-key后面改成那个唯一标识的名字，label是标签名，也就是节点显示的名字，children是一个对象数组，它里面可以嵌套id,label,children，childern代表的是子节点，所以，关键问题是怎么把一个节点下面的所有子节点，都放到这个children中。

设计数据库：

Id为2和3的父节点是id为1的，id为4，5，6的，父节点是id为2的，依次类推

 

编写后台接口代码，查询所有组织：

先查询所有的数据，将所有的数据，转换成一个VO对象（最好不要直接将实体与视图层对接，中间还要放一层VO）,利用递归算法，获取符合前端的，有层次结构的数据。

LoopQuery递归算法如下所示：

如果当前节点的父节点为0的话，将当前节点加入到子节点中，并以当前节点的id作为父节点继续遍历，查询有节点的父节点是当前节点的id的，就把这个节点加入到当前节点的子节点中。

GetAllOrgs请求后的数据如下：

Data后面就是前端要的数据

 

三、将静态数据变成动态请求，将请求的结果替换静态数据

调用getAllOrgs接口，将返回的数据赋值给数据源data

可以发现GetAllOrgs请求后的数据，组织名字是orgName,子节点数据是childrenOrgs,不是前端要求的label和children，所以，需要要用orgName替换掉label,childrenOrgs替换children。替换的代码如下：

每个节点右边的增删改查，代码如下：

这里的data是每个节点的数据，data.id代表的是当前节点的id，使用data.orgName，可以获取当前节点的名字

 

 

新增和修改的代码如下：

新增只需要获取id就行，修改不仅要获取当前节点id，还需要获取当前节点名字

 

 

 

新增和修改，提交数据给接口的代码如下：

如果弹窗窗口的标题名字是新增，就调用新增接口，用当前节点的id作为pid。如果是修改，就用当前节点的id作为id进行修改。