el-tree懒加载

<el-tree :props="defaultProps" // 配置项 :load="loadNode" // 加载子树数据的方法，仅当 lazy 属性为true 时生效 lazy> // 是否懒加载子节点，需与 load 方法结合使用 </el-tree> defaultProps: { children: 'subs', // 子节点数据 label: 'smartShortname', // 展示的名称 isLeaf: 'leaf' // 是否为叶子节点 } loadNode (node, resolve) { if (node.level === 0) { // 获取第一级的数据 getidmTree().then(res => { let result = res.data.data return resolve([result]) // result 所含的数据 要有 defaultProps 中绑定的值 }).catch(err => { console.log(err) }) } if (node.level >= 1) { // 点击节点 带着节点id 请求子节点数据 let id = node.data.o let params = {deptUuid: id} getidmTree(params).then(res => { let result = res.data.data.subs // subs子节点数据 return resolve(result) }).catch(err => { console.log(err) }) } }

第一次请求

点击三角或节点名称 请求子节点数据

如果节点下没有子节点

GIF 动图