概要
如何通过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树形控件的实现方式