Vue+Element-ui 表格树形结构和懒加载

Vue+Element-ui 表格树形结构和懒加载

因为有一个项目涉及到很多资源，并且资源上会附带很多子资源，如果一次加载出来的话会导致请求很慢，开始想着在列表上加一个查子资源的按钮，和悬浮框一次组合然后按需加载。后来想想不太好看，然后去百度看看有没有更好的方法，然后突然看到一个懒加载，发现刚好可以满足我的需求。先看一下element-ui的官方例子 其实已经很清楚了，我把最重要的部分截取出来

这个是官方实现效果：

这个是比较重要的懒加载的具体方法 load对应着el-table :load=“懒加载方法” 方法是渲染子节点的方法
js部分：

html部分：

大致看完官方的方法，就可以试着看看这个方法可不可行。先把代码粘过来再说，毕竟学任何东西都是从模仿开始的。
先将html中的关于懒加载的参数增加上

还是把官方的解释拿过来，感觉解释的比较清楚：
[支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。]
（row-key 大概意思是 唯一标识，防止展开节点的时候所有节点都展开，通俗点讲就是每次展开会看这个标识，会将相同标识的节点全部展开。子节点也必须和父节点用的一个字段 比如我父子用的都是resId）
hasChildren 这个用途 是可以自己控制的意思是 true的话代表这个节点有子节点，false反之

然后是懒加载loadChildren方法，用来按需加载子节点：

loadChildren : function(tree, treeNode, resolve){
                	//tree 保存着父节点的信息，可以拿过来直接用，感觉方便了不少。resolve这个是个方法
                	//通过对他的使用，应该就是给父节点赋值用的，将请求回来的数据直接赋值给父节点
                	var pId = tree.resId;
                	var data = {
                			resId : pId
                	}
                	Api.Resource.getChildResByPid(data, function(result) {
                		//将请求返回结果，加载到父节点上 
                		//resolve是可以把你想加载到节点上的数据加载进去。但是[ElTable] data must be an array
                		resolve(result.list);
                    });
                }

然后我把懒加载方法里面的三个参数都打印了出来:
tree：这个就是父节点的相关信息

treeNode：这个我还没有研究。。


这个不太清楚，我就粘贴出来吧：

resolve =  ƒ (i){if(!Array.isArray(i))throw new Error("[ElTable] data must be an array");o[t].loading=!1,o[t].loaded=!0,o[t].expanded=!0,i.length&&n.$set(a,t,i),n.table.$emit("expand-change",e,!0)}

我这蹩脚的英语，大概看了看应该是说是table里的数据一定是个数组，然后我试了试，就是赋值父节点下得children用的。毕竟我一直秉承一个观点：【这个世界上发明的所有东西或者事物都是为了方便人类的】

然后他就实现了我想要的效果：

记录一下我实现树结构懒加载的过程，是个后端程序员，啊哈哈哈哈哈，希望不对的地方有大佬可以指点。