关于elementui中的tree形组件的懒加载模式的使用

背景：

**vue项目下使用elementui组件的懒加载

项目需求:

**不限制分类等级，可以无限往下添加子分类。在每个分类的基础上都可以进行增删改查的操作以及关联供应商的操作。并且能够实现分类的拖拽，这里的项目需求是仅需要在相同父分类下可以拖动变换分类的顺序仅可。所以在这里拖拽就不详细介绍了。

效果图:

** 这里关于增删改查的需求就不过多描述。千篇一律的写法。（当然如果你对这块实在是有些模糊的话也可以私信我提供。）直接步入正题，懒加载的使用以及数据的刷新问题（这里当时做的时候头疼了好久。）

数据来源

** 首先后台提供接口用于保存分类数据，admin端自行添加、填充数据。
注意！！！
这里如果不是使用的树形的懒加载的模式的话，需将后台拿到的数据在前端自行转化为树形结构并渲染到树上。
但如果使用了懒加载，那么需要将点击不同分类获取到的数据 load 到你点击的分类的子分类下。如图：



到这里基本你要添加的子分类数据已经获取到了，但这时你需要将数据 resolve 到你添加的那个分类下面。因为懒加载模式下的数据结构并不是树形结构，而是将数据 resolve 到childNodes里面。

需注意点

*1. 懒加载模式下所必需的三个字段， lazy、load、node-key。
2.当你的后台所返回的数据有name字段时，需将name字段转为label字段。传入prop。如图。
3. 当你这个节点被load过数据之后，其实是不会在触发这个事件的。所以这时候你添加子分类的时候你会发现页面上的数据没有刷新过来。这时候你刷新一下页面就会发现添加的子分类就出来了，所以这时候我们需要将数据进行实时刷新。你只需要这样，哪里需要刷新数据调用这个方法即可。

3.这里的点击树形所需的事件基本都在 node 与 data 中，可以用@click自行传入。到这里懒加载的基本使用就可以了，有疑问的或者错误的欢迎指正。有用的话麻烦点个赞再走吧！