概要

如何通过vue2+element-ui实现树形控件的懒加载

整体架构流程

1.树形控件的组件代码

            <el-tree:data="treeData":props="defaultProps":load="load"lazy@current-change="handleNodeClick":expand-on-click-node="true":highlight-current="true"ref="tree"node-key="id"><span class="custom-tree-node" slot-scope="{ data }"><span>{{ data.name}}</span></span></el-tree>

2.加载子树数据的方法

 async loadNode(node, resolve) {if (node.level == 0) {//若根目录的接口和子节点数据不同则需要加判断} else {let arr = [];arr = node.data.fathers;let treeData = await this.getTreeAction();return resolve(treeData);}},

3.子节点接口

 getTreeAction(arr, nextLayerIsVariable) {return new Promise((resolve, reject) => {resolve(data);//data是通过后端接口获取到的数据            });},

 小结

记一次加载element-ui树形控件的实现方式