[element-ui] el-tree 懒加载load

懒加载：点击节点时才进行该层数据的获取。

注意：使用了懒加载之后，一般情况下就可以不用绑定:data。

<el-tree :props="props" :load="loadNode" lazy></el-tree>

懒加载—由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

loadNode(node, resolve) {if (node.level === 0) {return resolve([{ name: 'region' }]);}if (node.level > 1) return resolve([]);setTimeout(() => {const data = [{name: 'leaf',leaf: true, // 为叶子节点}, {name: 'zone'}];resolve(data);}, 500);}
}

手动触发load更新

推荐，此方法有效避免直接调用loadNode(node, resolve)函数，可以间接从组件内部触发load事件，这样就不需要缓存resolve这个不好拿到的入参。省去后续很多麻烦事，特别是由于懒加载只加载一次导致缓存的数据和方法不匹配当前点击的节点，从而导致增删改树结构数据时显示异常的问题，方法2中有详细说明。

   
refreshNode(key) {// 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.keylet node = this.$refs.tree.getNode(key);//  设置未进行懒加载状态node.loaded = false;// 重新展开节点就会间接重新触发load达到刷新效果node.expand();},

手动触发load更新 方法2

可以在第一次懒加载数据的时候，把 loadNode 的 2 个参数保存下来，然后添加节点的时候，重新调用一下这个方法就可以了

不推荐，由于loadNode只会针对某个节点加载一次，后续再点击你点过的这个节点的小箭头不会再次触发loadNode，这容易让缓存的两个数据this.node和this.resolve与当前点击节点不匹配（比如你点击了未懒加载过的小箭头，再去点已经懒加载过的其他小箭头或者节点，这时候由于已懒加载的不会再触发loadNode函数，而你缓存的this.node和this.resolve却是上一次的，这种情况下如果你在当前点击的节点对子节点进行增删改请求后去手动调用loadNode传入this.node和this.resolve刷新树节点，由于传入的数据都是上一次的，那么就会出现你请求的新的树节点数据跑到上一次触发懒加载缓存的节点去的情况，这时树结构的数据就显示异常了)

// 节点懒加载事件
loadNode (node, resolve) {// loadNode 的 2 个参数保存下来方便下次手动调用传入this.node = nodethis.resolve = resolve// 你的请求逻辑......
},
refreshNode () {this.node.childNodes = [] // 这里把子节点清空，是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点，所以会有节点重复的情况。// 把刚刚存的两个变量手动传入调用this.loadNode(this.node, this.resolve)
},

手动触发load更新

async loadNode(node, resolve) {if (node.level === 0) { // 加载第一级节点（年份）return resolve(await this.getYearList());}if (node.level === 1) { // 加载第二级节点（月份）return resolve(await this.getMonthList(node));}return resolve([]);
},
// 调用接口 ，获取年份数据
getYearList(){return data
},// 调用接口 ，根据年份获取月份数据
getMonthList(node){return data
}

// 想要重新获取一级节点,直接调用
this.getYearList()// 想要重新获取二级节点,直接调用
this.getMonthList(node)

---

参考：
2021-09-06 el-tree 懒加载load 手动触发load更新的三种方法

el-tree手动触发懒加载load

ElementUi Tree树形控件的使用（增、删）

ElementUI tree 懒加载 手动刷新数据

el-tree 在 el-dialog 显示时 重新加载 el-tree （el-tree采用懒加载）